CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
Michael Tot Korsgaard
Michael Tot Korsgaard

Reputation: 4014

Unlimited levels in dropdown menu

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.

Upvotes: 4

Views: 950

Answers (1)

Venkata Krishna
Venkata Krishna

Reputation: 15112

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.

Upvotes: 5

Related Questions