Grow your CSS skills. Land your dream job.

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.

    http://codepen.io/fwhenin/pen/BKkud

    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.

Then

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.

*May or may not contain any actual "CSS" or "Tricks".