css - Keep submenu open when hovering submenu item -
i know pretty basic css question cannot figure out.
when hover top level menu item, sub menu displays, if try hover on submenu items submenu disappears.
see below menu structure , css display submenu
ul.sub-menu { position: absolute; left: -9999px; margin: 0; opacity: 0; padding: 0; background: #2a2a2a; } .menu-item:hover > ul.sub-menu { left: auto; opacity: 1; } <li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">about</a> <ul class="sub-menu"> <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">news</a></li> </ul> </li>
it's difficult absolutely because don't have complete sample of code quick fix.
li { border: 1px solid red; /* visual reference */ display:inline-block; /* shrink wrap */ position:relative; /* positioning context */ } ul.sub-menu { position: absolute; left: -9999px; top:100%; /* directly below list item parent */ margin: 0; opacity: 0; padding: 0; background: #2a2a2a; } .menu-item:hover > ul.sub-menu { left: auto; opacity: 1; } <li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="/about">about</a> <ul class="sub-menu"> <li id="menu-item-402" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"><a href="/news">news</a> </li> </ul> </li>
Comments
Post a Comment