CSS多级下拉菜单定位

时间:2010-11-10 08:24:40

标签: css menu drop-down-menu positioning

我正在开发一个网站linked here,其中包含3个级别的下拉菜单(主要和2个子级别)。我正在使用MODx cms和Wayfinder进行菜单创建。 CSS被选中,经过高度修改和工作,但我不明白一个细节。

当你查看网站的菜单时:最右边的主菜单项(“链接”) - > 链接1.2 ,“链接1.2 ”的第二级子菜单很好地弹出到第一级子菜单的左侧(在较轻的内容体内。

第二级子菜单通过“左:120px (1项宽度)定位:它抵消它并将其向右移动。例如,参见”beeld& geluid“ - >”音频“ - >第二级子菜单

对于最右边的子菜单,在内容中弹出,通过使用负偏移将其向左移动左:-240px; (这是宽度) 2 项目)

我想念的是:为什么这个负偏移必须是240px 2项而不是1项120px。最后一个是我的预期。

CSS包含注释,所涉及的行在css文件中是155 -161(你必须从网站上获取它,因为作为新用户我无法添加第二个链接,因为新用户限制为1最大链接

问题:

任何人都可以向我解释这个吗?负偏移为2而不是1项?

致以最诚挚的问候,

Hans Troost

1 个答案:

答案 0 :(得分:2)

在第一个下拉菜单中,列表项是相对设置的。然后第二个ul进入那里,但绝对定位并且对项目(在所有情况下向右)。但是,因为项目“链接”下面的子子菜单会掉落到网站上,所以它位于-240px左侧。不是-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。

相关问题