Grow your CSS skills. Land your dream job.

CSS Menu, position of third level

  • # June 6, 2013 at 3:22 pm

    I’m developing a site with a horizontal menu that has two sub-levels. The second level appears below the primary item. Then when you hover over that, the third level flies out to the right of that `

  • `.

    I’m used to seeing the third level align next to its parent. But is there a way to get the third level to align to the top of the parent’s `

      `? That is, all the third levels would be at the same vertical position…
# June 6, 2013 at 11:42 pm

Yes. Instead of giving the parent li a ‘position:relative’, give the parent ul a ‘position:relative’. That would align the child ul (I’m assuming you’re using absolute positions for the sub-levels’) with the parent ul, instead of the parent li. An absolute position element is positioned relative to an element that has a relative position in which it is placed.

Edit: Wrong answer sorry, since I realize that you’re talking about the third level submenu.

I’m not sure if there’s a better way to do this, but you could use a div as the drop down element(thus absolutely positioned). Then the ul placed inside the div could have a relative position. The third level position would then be absolutely positioned in relation to this ul.

Let me know if you need a codepen example.

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

You must be logged in to reply to this topic.

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