CODEWITHSUNDEEP
htmlcss
DMande
DMande

Reputation: 341

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/

Upvotes: 1

Views: 95

Answers (2)

FE Bear
FE Bear

Reputation: 111

But when i hover the other li that has submenu i want the selected submenu to disappear

there is no easy way to toggle close the selected (expanded) submenu when other submenu has been hover (more like radio button) by straight css.

Upvotes: 0

gavgrif
gavgrif

Reputation: 15489

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>

Upvotes: 1

Related Questions