CSS multi-level dropdown menu positioning

Question

I am developing a website linked here with 3-level dropdown menus (main, and 2 sublevels). I'm developing with MODx cms and Wayfinder for menu-creation. The CSS is picked somewhere, higly modified and works, but I do not understand 1 detail.

When you look to the site's menu: rightmost main-menu item ("links") --> Links 1.2 , the 2nd level submenu of "Links 1.2" nicely pops up to the left of the 1st level submenu (inside the lighter contentbody.

The 2nd level submenus are positioned by a "Left: 120px (1 item width): which offsets it and shifts it to the right. See e.g. "beeld & geluid" --> "Audio" --> 2nd level submenu

For this rightmost submenu popping up inside the content it works by shifting it to the left by using a negative offset: Left: -240px; (which is the width of 2 items)

What I miss is: why this negative offset has to be 240px 2 items in stead of 1 item of 120px. The last is what I expected.

The CSS contains comments and the involved lines are 155 -161 in the css-file (you have to get it from the site since as a new user I'm unable to add a 2nd link because new users are limited to 1 link at max)

Question:

Can anyone explain this to me? The negative offset of 2 in stead of 1 item?

Best regards,

Hans Troost

Justus Romijn · Accepted Answer · 2010-11-10 08:53:41Z

2

What happens is that in the first dropdown menu, the list-items are set relatively. Then the second ul goes in there, but is positioned absolutely and adjecent to the items (to the right in all cases). However, because the sub-submenu beneath the item "links" would fall of the website, it is positioned left -240px. Not -120px, because it would sit on top the of the first submenu. Does that make sense?

--------------------------------------
Top item 1 | top item 2 | top item 3 |
--------------------------------------
                        | sub item 1 |
           ---------------------------* * * * * * *
           | subsubitem | sub item 2 | subsubmenu * <--  this is the ul that is positioned
           ---------------------------* * * * * * *      absolute
           -240px       -120px        0px          120px

conclusion

So my point is that the ul is positioned in the same place, however the li's are moved to the left. And therefore it needs -240px because it positioned relative to the ul.

edited Nov 10, 2010 at 8:53

answered Nov 10, 2010 at 8:42

Justus Romijn

16.1k5 gold badges54 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hans Troost Over a year ago

Thank a lot: exactly the kind of answer I was hoping for. Good explanation: I get it now.

Collectives™ on Stack Overflow

CSS multi-level dropdown menu positioning

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related