我正在尝试构建一个 megamenu。所以我有一个无序列表，相对于它的容器定位。
其中是包含链接的列表项。连同一个绝对定位的容器 div。
我正在关注本教程： http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
然而，我想要做的是强制每个容器 div 成为容器的最大宽度......换句话说，如果你将鼠标悬停在第一个菜单项上，我需要生成的显示 div 是 100% 的宽度整个菜单，除了左对齐，而不是 100% 包含 LI 的宽度，并左对齐。
我怎样才能做到这一点？
这是当前存在的 HTML 和 CSS，以及 jsfiddle 上的链接
HTML
<ul id="menu">
<li><a href="~/">Home Page</a></li>
<li><a href="#" onclick="return false;">About Us</a>
<div class="dropdown_1columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">Solutions</a>
<div class="dropdown_2columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">Customer Support</a>
<div class="dropdown_3columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">OrboNation</a>
<div class="dropdown_4columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">Business Partners</a>
<div class="dropdown_5columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">News & Events</a>
<div class="dropdown_6columns">
<p>5 Columns content</p>
</div>
</li>
<li><a href="#" onclick="return false;">Knowledge Center</a>
<div class="dropdown_7columns">
<p>5 Columns content</p>
</div>
</li>
</ul>
CSS
#menu {
position:relative !important;
list-style:none;
width:100%;
float:none;
clear:both;
margin:0;
height:43px;
padding:0;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Background color and gradients */
background: #d9d9d9;
background: -moz-linear-gradient(top, #ddd, #d9d9d9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#d9d9d9));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff; }
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:10px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #333;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
.dropdown_1columns,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns,
.dropdown_6columns,
.dropdown_7columns {
width:100% !important;
margin:4px auto;
position:absolute;
z-index:999;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
/*
.dropdown_1columns {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_6columns {width: 700px;}
.dropdown_7columns {width: 700px;}
*/
#menu li:hover .dropdown_1columns,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns,
#menu li:hover .dropdown_6columns,
#menu li:hover .dropdown_7columns {
left:-1px;top:auto;
}
链接到小提琴
http://jsfiddle.net/o7thwd/dZbPy/
我想要的是让每个下拉容器都是主菜单宽度的 100%，但左对齐