我正在尝试构建一个超级菜单。因此，我有一个无序列表，相对于其容器定位。
其中包含一个链接的列表项。以及一个绝对定位的容器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;
}
链接到Fiddle
http://jsfiddle.net/o7thwd/dZbPy/
我的要求是让每个下拉菜单容器的宽度都与主菜单相同，但左对齐。