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

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -