Home/ Questions/Q 3391720
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T03:50:08+00:00

I am developing a website linked here with 3-level dropdown menus (main, and 2

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0