0

With only CSS, how do I hide current submenu when a different menu item is hovered over?

I have done this successfully with jQuery by setting up global vars; e.g., $itsPrevSubmenu and $itsCurrSubmenu, and then compare the two using [if ($itsCurrSubmenu[0] !== itsPrevSubmenu[0]), and as I mouseover each li and if not equal, hiding $itsPrevSubmenu. That's pretty straightforward with jQuery.

my current goal is to do the same thing with just CSS.

/*
    Show drop menu when over main menu and
    show 1st sub-menu when over sub-menu's parent
*/
#menubar li:hover .aMenu {
    left: auto;
}

/*
    Hide sub-sub-menu when hovering over
    its grandparent (li:hover) menu.
*/
#menubar li:hover .aMenu .aMenu {
    left: -99999px;
}

/*
    Show 1st sub-menu when hovering over
    its parent (li:hover) .aMenu ...

    ... but, still keep hidden all its deeper
        sub-sub menus from above.
*/
#menubar .aMenu li:hover > .aMenu {
    left: auto;
}
<li class="daddy">
    text233
    <ul class="aMenu">   <!-- sub-menu  -->
        <li>
            text2331
        </li>
        <li>
            text2332
        </li>
    </ul>
</li>   <!-- daddy -->

my unsuccessful attempt to hide =

#menubar li .aMenu,
   #menubar li .aMenu .aMenu {
      left: -99999px;
}

Again, using jQuery very straightforward .. with CSS, not so much?

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – phucbm Feb 04 '22 at 05:17
  • The closest you can get with hover behavior is to make the submenus next to each other (either side by side or one above the other) and then have the submenus simply show on hover. That way when you move to the next menu item, the submenu disappears. While I unfortunately don't know of a good canonical, this question _has_ been covered quite a bit on Stack Overflow. – TylerH Feb 15 '22 at 14:44

0 Answers0