Unlimited levels in dropdown menu

css, drop-down-menu, html, jquery

Solution

jsFiddle DEMO

.nav ul {
}
.nav li ul {
    display: none;
}
.nav ul li a {
    display: block;
}
.nav li:hover>ul { //change here
    display: block; 
}

Instead of showing all `ul` children of `hover`, show only direct children.

Problem

I have a generated unordered list with list inside which I want to make into a dropdown menu. The problem is that I don't know how many levels there will be, and I only want to show one level at a time. So far I got this: HTML: ``` <ul class="nav"> <li> <a href="#">link1</a> </li> <li> <a href="#">link2</a> <ul> <li> <a href="#">link2.1</a> <ul> <li> <a href="#">link2.1</a> </li> </ul> </li> </ul> </li> </ul> ``` CSS: ``` .nav ul { } .nav li ul { display: none; } .nav ul li a { display: block; } .nav li:hover ul { display: block; } ``` This code however show all the sub-ul's when hover at top. And what I want is only to show the next level, and have sub-levels under that one hidden. And so on. But still show levels above.

Original source