I am facing an issue with a dynamically generated unordered list that I want to turn into a dropdown menu.
The challenge is that I do not know how many levels there will be, and I only want to display one level at a time.
Here is what I have tried so far:
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;
}
However, the current code displays all sub-ul's when hovering on top. What I actually want is to only show the immediate next level, keeping sub-levels hidden. This should apply recursively for each level while still displaying higher levels.