CSS多级下拉菜单定位

Question

我正在开发一个网站linked here，它有 3 级下拉菜单（主菜单和 2 子菜单）。我正在使用 MODx cms 和 Wayfinder 开发菜单创建。 CSS 是在某处挑选的，经过高度修改并可以正常工作，但我不了解 1 个细节。

当您查看站点的菜单时：最右侧的主菜单项（“links”）--> Links 1.2 ，“ 的第二级子菜单Links 1.2" 很好地弹出到第一级子菜单的左侧（在较轻的 contentbody 内。

第二级子菜单由“Left: 120px (1 item width): 偏移并向右移动。参见例如“beeld & geluid” --> “Audio " --> 二级子菜单

对于在内容中弹出的最右边的子菜单，它通过使用负偏移将其向左移动来工作：Left: -240px;（这是宽度2 项）

我想念的是：为什么这个负偏移量必须是 240 像素 2 项而不是 1 项 120 像素。最后一个是我所期望的。

CSS 包含 cmets 并且涉及的行是 css 文件中的 155 -161（您必须从站点获取它，因为作为新用户我无法添加第二个链接，因为新用户被限制为 1最大链接）

问题：

谁能给我解释一下？ 2而不是1项的负偏移量？

最好的问候，

汉斯·特罗斯特

Answer 1

发生的情况是，在第一个下拉菜单中，列表项是相对设置的。然后第二个 ul 进入那里，但绝对定位并与项目相邻（在所有情况下都在右侧）。但是，因为“链接”项下的子菜单会落在网站上，所以它位于左侧 -240 像素。不是 -120px，因为它会位于第一个子菜单的顶部。这有意义吗？

--------------------------------------
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

结论

所以我的意思是 ul 位于同一个地方，但是 li 被移到了左边。因此它需要 -240px，因为它相对于 ul 定位。