Не работает выпадающее меню через CSS (hover)

Question

Я только начала учиться, уже возникают небольшие проблемки:( Уже все перепробовала и перепроверила, не появляется выпадающее меню при наведении. Делала по уроку.

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}

.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}

.root:hover .dropdown {
  display: block;           // Вот тут не работает
  background-color: #ccc;
}

.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}

.dropdown>li {
  cursor: pointer;
  list-style: none;
}

.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li class="root">Меню</li>
    <ul class="dropdown">
      <li>1-й элемент</li>
      <li>2-й элемент</li>
    </ul>
    <li class="root">Меню 2</li>
    <ul class="dropdown">
      <li>3-й элемент</li>
      <li>4-й элемент</li>
    </ul>
  </ul>
</body>

Answer 1

Нужно было вложить .dropdown в .root

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}

.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}

.root:hover .dropdown {
  display: block;
  background-color: #ccc;
}

.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}

.dropdown>li {
  cursor: pointer;
  list-style: none;
}

.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li class="root">Меню
      <ul class="dropdown">  // .dropdown находится внутри .root
        <li>1-й элемент</li>
        <li>2-й элемент</li>
      </ul>
    </li>
    <li class="root">Меню 2
      <ul class="dropdown">
        <li>3-й элемент</li>
        <li>4-й элемент</li>
      </ul>
    </li>
  </ul>
</body>

БЛОГ НА HUSL

Не работает выпадающее меню через CSS (hover)

Ответы (1 шт):