CODEWITHSUNDEEP
htmlcss
rob.m
rob.m

Reputation: 10581

How to show/hide a 3 levels menu nav in css?

I have this html:

<ul>
  <li class="current"> level 1 </a>
    <ul>
      <li><a class="children">level 2</a>
        <ul>
          <li><a> level 3 </a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

How do I create a simple show/hide using css display none/block?

Currently doing this but only gets me to the second level and I'm a bit logically stucked:

ul ul,
ul ul ul {
   display: none;
}

.current .children {
   display: block;
}

Upvotes: 0

Views: 2737

Answers (2)

djjavo
djjavo

Reputation: 115

If you wanted to use jQuery you could check out http://api.jquery.com/toggle/

$('#yourlinkID').click(function() {
     $('#yourbodyID').toggle()
});

The above code toggles the visibility of the element with #yourbodyID when the element with #yourlinkID is clicked.

Hope this helps :)

Upvotes: 1

Merec
Merec

Reputation: 2761

Very simple, and there are dozens of examples everywhere. A little search might help.

ul ul {
    display: none;
}

ul > li:hover > ul {
    display: block;
}

ul > li > ul > li:hover ul {
    display: block;
}

Upvotes: 2

Related Questions