How to force all submenu levels of ONE parent menu item to be active on hover (mega menu)

Question

I have a mega menu that I'm attempting to build within HubSpot. I have searched through other posts, but can't find a solution.

Details: - horizontal menu with vertical dropdowns on some items. - need a mega menu on the first menu item only - menu has 3 levels - dropdown mega menu has 3 columns, each with a "heading" which is the 2nd level menu item. Then 3rd level submenu items for each column.

I have it styled exactly as I need it. When I hover over the parent menu item, the mega menu background appears with the 2nd level menu headings (horizontally). Good to this point.

NOW THE ISSUE... the 3rd level menu items (contents of the 3 columns) only shows when I hover over the 2nd level headings. I need these 3rd level items to be active automatically when the parent level menu item is hovered.

SO... need something to trigger all of the 3rd level menu items to be active when the 1st level parent menu item is hovered on.

 <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>

Can you add some `css` to your question? So other people can help you debug your `css`. — Davy de Vries, Aug 29 '19 at 14:33

YellowAfterlife · Answer 1 · 2019-08-29T14:45:42.047

You can use the > to select elements only one layer inwards:

/* 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>

(not a very visual demo for lack of CSS in original question)

score 0 · Answer 2 · answered Aug 29 '19 at 14:36

If I understand correctly, you should be able to do this pretty simply. But maybe I'm confused...

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

I.e. when you hover over .hs-menu-depth-1, apply the following styling to the ul submenu that is a direct child of .hs-menu-depth-2, which is the ul that contains all the 3rd-level menu items.

score 0 · Answer 3 · answered Aug 29 '19 at 14:45

I guess your .hs-menu-depth-2 and .hs-menu-depth-3 allready have display: none;.

Then you add

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

or if you don't have any other elements that are display: none; in your menu you can do:

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

See:

.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>

or see: https://codepen.io/Minegolfer/pen/pozwKwQ

How to force all submenu levels of ONE parent menu item to be active on hover (mega menu)

3 Answers3