我正在开发一个网站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
答案 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。