Как заставить все уровни подменю ОДНОГО элемента родительского меню быть активными при наведении курсора (мегаменю)

У меня есть мегаменю, которое я пытаюсь создать в HubSpot. Я просмотрел другие сообщения, но не нашел решения.

Подробности: - горизонтальное меню с вертикальными выпадающими списками по некоторым пунктам. - требуется мегаменю только для первого пункта меню - меню имеет 3 уровня - выпадающее мегаменю имеет 3 столбца, каждый с «заголовком», который является элементом меню 2-го уровня. Затем элементы подменю 3-го уровня для каждого столбца.

Я сделал это именно так, как мне нужно. При наведении курсора на родительский пункт меню появляется фон мегаменю с заголовками меню 2-го уровня (по горизонтали). Хорошо до этого момента.

ТЕПЕРЬ ПРОБЛЕМА ... пункты меню 3-го уровня (содержимое 3-х столбцов) отображаются только при наведении курсора на заголовки 2-го уровня. Мне нужно, чтобы эти элементы 3-го уровня были активными автоматически при наведении курсора на пункт меню родительского уровня.

ТАК ... нужно что-то, чтобы активировать все элементы меню 3-го уровня при наведении курсора на элемент родительского меню 1-го уровня.

 <ul>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">MEGA PARENT</a>
   <ul class="hs-menu-children-wrapper">
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 1</a>
     <ul class="hs-menu-children-wrapper">
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 1</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 2</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 3</a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 2</a>
     <ul class="hs-menu-children-wrapper">
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 1</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 2</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 3</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 4</a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 3</a></li>
   </ul></li>
 </ul>

menu css hubspot megamenu
person DirectTech    schedule 29.08.2019    source источник
comment
Не могли бы вы добавить css к вашему вопросу? Так что другие люди могут помочь вам отладить ваш css.   -  person Davy de Vries    schedule 29.08.2019

Ответы (3)


arrow_upward
0
arrow_downward

Если я правильно понимаю, у вас должно получиться довольно просто. Но может я запуталась ...

.hs-menu-depth-1:hover .hs-menu-depth-2 > .hs-menu-children-wrapper {
    display: block;
}

Т.е. при наведении указателя мыши на .hs-menu-depth-1 примените следующий стиль к подменю ul, которое является прямым потомком .hs-menu-depth-2, то есть ul, содержащего все элементы меню 3-го уровня.

person Matt Tanner    schedule 29.08.2019

arrow_upward
0
arrow_downward

Думаю, у ваших .hs-menu-depth-2 и .hs-menu-depth-3 уже есть display: none;.

Затем вы добавляете

.hs-menu-depth-1:hover .hs-menu-depth-2, .hs-menu-depth-1:hover .hs-menu-depth-3 {
    display: block;
}

или если у вас нет других элементов, которые display: none; в вашем меню, вы можете сделать:

.hs-menu-depth-1:hover *{ 
    display: block;
}

Видеть:

.hs-menu-depth-2{
  display: none;
}

.hs-menu-depth-3{
  display: none;
}

.hs-menu-depth-1:hover .hs-menu-depth-2, .hs-menu-depth-1:hover .hs-menu-depth-3{
  display: block;
}
<ul>
  <li class="hs-menu-depth-1">mega parent
   <ul>
    <li class="hs-menu-depth-2" role="menuitem">heading ITEM 1
     <ul>
      <li class="hs-menu-depth-3">column 1 - item 1</li>
      <li class="hs-menu-depth-3">column 1 - item 2</li>
      <li class="hs-menu-depth-3">column 1 - item 3</li>
     </ul>
    </li>
    <li class="hs-menu-depth-2">heading ITEM 2
     <ul>
      <li class="hs-menu-depth-3">column 2 - item 1</li>
      <li class="hs-menu-depth-3">column 2 - item 2</li>
      <li class="hs-menu-depth-3">column 2 - item 3</li>
      <li class="hs-menu-depth-3">column 2 - ITEM 4</li>
     </ul>
    </li>
    <li class="hs-menu-depth-2">heading item 3</li>
   </ul>
  </li>
 </ul>

или см .: https://codepen.io/Minegolfer/pen/pozwKwQ

person Jeremy    schedule 29.08.2019

arrow_upward
0
arrow_downward

Вы можете использовать > для выбора элементов только на один слой внутрь:

/* subject of answer */
.hs-menu-children-wrapper {
  display:none;
}
.hs-item-has-children:hover > .hs-menu-children-wrapper {
  display:inherit;
}

/* mockup menu style */
.hs-menu-item {
  list-style: none;
  width: 160px;
  position: relative;
  line-height: 30px;
  background: #404040;
  padding: 0 5px;
  box-sizing: border-box;
}
.hs-menu-item:hover {
  background: #707070;
}
.hs-menu-item a {
  color: white;
  text-decoration: none;
}
.hs-menu-children-wrapper {
  list-style: none;
  position: absolute; 
  padding: 0;
  margin: 0;
  top: 0;
  left: 160px
}
<ul>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">MEGA PARENT</a>
   <ul class="hs-menu-children-wrapper">
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 1</a>
     <ul class="hs-menu-children-wrapper">
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 1</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 2</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 1 - ITEM 3</a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 2</a>
     <ul class="hs-menu-children-wrapper">
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 1</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 2</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 3</a></li>
      <li class="hs-menu-item hs-menu-depth-3"><a href="javascript:;" role="menuitem">COLUMN 2 - ITEM 4</a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">HEADING ITEM 3</a></li>
   </ul></li>
 </ul>

(не очень наглядная демонстрация из-за отсутствия CSS в исходном вопросе)

person YellowAfterlife    schedule 29.08.2019