The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Css Dropdown with 2 Levels

  • # February 14, 2013 at 3:01 pm

    Got this a while ago. my bread and butter Dropdown nav CSS setup. but now looking to add a second level or dropdown.

    2 questions.

    1) How can I make the second level DIRECTLY to the left of the parent

  • (instead of below and to the left)
    2) How can I make it’s left edge be against the right edge of the parent li (in case the text spreads the li out farther)? I’d imagine I’d have to rely on percentage padding instead of px

    Thanks in advance

# February 14, 2013 at 3:15 pm

nav > ul > li > ul li > ul {
top: 0;

Will align the whole 3rd level menu with the 2nd level.


nav > ul > li > ul li {
position: relative;

# February 15, 2013 at 12:24 pm

AHH, that’s what I was missing, the relative positioning on the parent li. THANK YOU

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed