CODEWITHSUNDEEP
htmlcss
zomboble
zomboble

Reputation: 833

CSS multi level drop down menu position next level

I was wondering how a css drop down can be positioned (x axis). At the moment it looks like this:

Top Level (you hover and this appears)

When you hover over the second level the third level appears underneath it, how do i position it so every time its at the side? Thanks :)

jsFiddle: http://jsfiddle.net/YgYtL/

Upvotes: 1

Views: 889

Answers (2)

Andres I Perez
Andres I Perez

Reputation: 75379

Target your third level dropdown and position it exactly 100% from the left of your second level element, which should be the whole width of your second level dropdown, like so:

#navMenu ul ul ul {
    left: 100%;
    top: 0;
}

Demo: http://jsfiddle.net/YgYtL/24/

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

I've updated the jsFiddle with this code in the css

#navMenu ul li ul li:hover ul{
    top : 0;
    left : 100%;
}

here it is : http://jsfiddle.net/YgYtL/16/

Upvotes: 1

Related Questions