jquery - 如何使 CSS 巨型菜单占据页面的整个宽度？ (998px，但在中间？)

Question

亲爱的互联网同仁，您好，

我正在尝试构建一个megamenu，因为我认为正常的

-列表已经过时了。

到目前为止我做得很好，因为我在 www 上找到了一些很好的教程。尽管如此，我希望我的megamenu 始终位于主菜单下方。主菜单的宽度为 998px，megamenu 的宽度也应该如此。当我给它相同的宽度时，会应用宽度，但我遇到了问题，megamenu 从

-Element 悬停的点开始。但我希望它始终从主菜单的左侧开始。

我试图给它一个绝对位置，但它仍然无法按照我想要的方式工作。我希望我把问题说清楚了。如果有人能给我提示，我将非常高兴。

 #menu li:hover .dropdown_1column, 
 #menu li:hover .dropdown_2columns, 
 #menu li:hover .dropdown_3columns,
 #menu li:hover .dropdown_4columns,
 #menu li:hover .dropdown_5columns 
         position: absolute;
         left:-1px;
         top:auto;
         right: auto;
         bottom: auto;
         float: left;
 }

JSFiddle

Answer 1

亚历克斯是正确的。具有绝对定位的元素将根据具有相对位置的最接近的父元素进行自身对齐。

因此，从 #menu li 中删除相对定位允许子容器将自身定位到下一个相对父容器 #menu。

但是，我会更进一步，使用直接子选择器来防止子列表项受到影响:#menu > li