0

.dropdown {
  position: absolute;
  margin: -60px 0 0 200px;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: greenyellow;
  padding: 15px;
  border-radius: 5px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropdown-content a:hover {
  background-color: #ddd;
}


.dropdown:hover .dropdown-content {
  display: block;
}


.dropright-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


.dropright-content a {
  position: absolute;
  top: 0;
  left: 0px;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropright-content a:hover {
  background-color: #ddd;
}


.dropright:hover .dropright-content {
  display: block;
}
<br><br><br><br>
<div class="dropdown">
  <div class="dropbtn">≡ Каталог</div>
  <div class="dropdown-content"><a href="#">Одежда</a>
    <div class="dropright-content">
      <a href="#">Мужская одежда</a>
      <a href="#">Женская одежда</a>
    </div>
    <a href="#">Электроника</a>
    <a href="#">Книги</a>
  </div>
</div>

При наводе курсора на кнопку "Каталог" вниз выпадают подпункты. Однако когда наводишь курсор на подпункт "Одежда" не появляется выплывающее меню вправо. Почему?

Laukhin Andrey
  • 3,471
Ildar
  • 1
  • Событие .dropdown-content a:hover не то же самое, что .dropright-content a:hover. Событие не происходит. А вообще, ищется не очень и сложно https://ru.stackoverflow.com/questions/293281/Как-при-наведении-на-один-элемент-менять-стили-другого-элемента – Quazimorda Aug 03 '21 at 14:10

1 Answers1

0

Логично предположить, что подменю должно появляться при наведении на ссылку "Одежда".
Добавим класс dropright к тегу <a>:

<a class="dropright" href="#">Одежда</a>

Добавим в CSS событие hover, используя соседний родственный селектор (+), чтобы отобразить следующий за ссылкой блок dropright-content:

.dropright:hover + .dropright-content {
  display: block;
}

Над оформлением Вам нужно еще поработать.

Laukhin Andrey
  • 3,471