html - div 在列表项中的 CSS 定位

Question

我正在尝试构建一个 megamenu。所以我有一个无序列表，相对于它的容器定位。

其中是包含链接的列表项。以及绝对定位的容器 div。

我正在学习本教程:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

然而，我想要做的是强制每个容器 div 成为容器的最大宽度...换句话说，如果您将鼠标悬停在第一个菜单项上，我需要结果显示的 div 为 100%整个菜单的宽度，除了左对齐，而不是包含 LI 的宽度的 100%，并与之左对齐。

我该怎么做？

这是当前存在的 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 &amp; 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/

我想要的是让每个下拉容器的宽度为主菜单的 100%，但左对齐

Answer 1

当您从 #menu li 中删除 position: relative 时，子菜单 div position 的 absolute 到#menu，查看更新 JSFiddle .