CODEWITHSUNDEEP
htmlcss
b0ssY
b0ssY

Reputation: 25

Positioning 3rd level of drop down menu

I'm having issues designing the 3rd level of my drop down menu in CSS.

I have a working fiddle here to show you: http://jsfiddle.net/HdFaV/

As you can see, the first menu item A and its sub-levels are able to position nicely (ignore the overlapping of the 3rd level to the 2nd menu item). However, if you try for the 3rd level for the second menu item XXXXXXXX, it positions incorrectly.

I understand that the issue is due to the margin-left from the code below

/* level 3+ list */
#nav ul ul
{
    margin-left: 50px;
    top: 0px;
}

Is there anyway to automatically set the margin-left according to how long the 2nd level menu item's width is? Or do I have to manually set the margin-left for every one of them? Such as:

#nav ul ul:nth-child(1)
{
....
}

and so on..?

Thanks for any help!

b0ssY

Upvotes: 1

Views: 173

Answers (1)

undercoverwd
undercoverwd

Reputation: 26

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

Instead of using the left margin use 100% positioning which will calculate the width of the higher list item.

Upvotes: 1

Related Questions