Unlimited levels in the dropdown menu

Question

I have a generated unordered list with a list inside which I want to go to the drop-down menu.

The problem is that I don’t know how many levels there will be, and I want to show only 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, shows all sub-ul on hover. And what I want is to only show the next level and sub-levels under this hidden one. Etc. But still show the levels above.

Answer 1

jsFiddle DEMO

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

, ul hover, .