如何使CSS超级菜单在页面的整个宽度？ （998px，但在中间？）

Question

亲爱的互联网研究员，您好

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

-Lists已经过时了。

到目前为止，我做得很好，因为我在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

你需要删除'position：relative;'来自以下内容：

#menu li {
float: left;
display: block;
text-align: center;
position: relative; /* <<<<<<<<<<<<< Remove this */
border-right: 1px #000db9 solid;
padding: 7px 10px 3px 10px;
}

然后，您需要删除或更改某些列上的单个宽度（下拉列表）。

示例：

.dropdown_3columns {
width: 420px;
}

请参阅http://jsfiddle.net/4paqY/1/

Answer 2

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

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

然而，我会更进一步，使用直接子选择器来防止儿童列表项受到影响：#menu > li