DMande DMande - 4 months ago 12
HTML Question

hover li and change sibling submenu

I need a little help here. I am trying to make a menu with submenu to be open without javascript or jquery (Only css if it is possible).

<nav id="container">
<ul>
<li><a href="">Link1</a></li>
<li class="haschildren selected">
<a>Link2</a>
<ul class="submenu">
<li><a href="">Link2-1</a></li>
<li><a href="">Link2-2</a></li>
<li><a href="">Link2-3</a></li>
</ul>
</li>
<li class="haschildren">
<a>Link3</a>
<ul class="submenu">
<li><a href="">Link3-1</a></li>
<li><a href="">Link3-2</a></li>
<li><a href="">Link3-2</a></li>
</ul>
</li>
</ul>
</nav>


When i have the class selected and page is loaded the .selected .submenu is open. But when i hover the other li that has submenu i want the selected submenu to disappear and the new one appear. In my case i cannot make the selected submenu hidden when hover over Link3 li.
Sorry for my english. To make it clear i would like when hover Link3 the Link2 submenu to become hidden and the Link3 submenu to open. But when hover out from Link3 to return to the default selected. If anyone could help i would appreciate it.

I made an example here. https://jsfiddle.net/ef8zgogr/

Answer

apply a display none to the .submenu's and then on :hover over the parent li (with the class of .hasChildren) change it to display block.

.submenu {display:none}
.selected ul{display:block}

#container:hover li ul{display:none}
#container li:hover ul{display:block}
<nav id="container">
  <ul>
    <li><a href="">Link1</a></li>
    <li class="haschildren selected">
    <a>Link2</a>
    <ul class="submenu">
      <li><a href="">Link2-1</a></li>
      <li><a href="">Link2-2</a></li>
      <li><a href="">Link2-3</a></li>
   </ul>
   </li>
   <li class="haschildren">
   <a>Link3</a>
   <ul class="submenu">
      <li><a href="">Link3-1</a></li>
      <li><a href="">Link3-2</a></li>
      <li><a href="">Link3-2</a></li>
   </ul>
   </li>
   </ul>
</nav>

Comments