html - CSS 菜单子项迫使父母调整大小

Question

我目前正在使用以下代码：

HTML

<div id="wrap">
  <ul class="navbar">
    <li><a href="#">COMPARE PLANS</a>
    </li>
    <li><a href="#">BENEFITS</a>
      <ul>
        <li><a href="#">LARGE CORPORATES</a>
        </li>
        <li><a href="#">SMALL & MEDIUM<br> BUSINESSES</a>
        </li>
        <li><a href="#">ENTREPRENEURS &<br> START-UPS</a>
        </li>
        <li><a href="#">EDUCATION &<br> NON-PROFIT</a>
        </li>
        <li><a href="#">WEB DEVELOPERS &<br> AGENCIES</a>
        </li>
        <li><a href="#">ARTISTS &<br> CELEBRITIES</a>
        </li>
      </ul>
    </li>
    <li><a href="#">GET STARTED</a>
      <ul>
        <li><a href="#">.NET</a>
        </li>
        <li><a href="#">PHP</a>
        </li>
        <li><a href="#">FACEBOOK</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

和CSS

#wrap {
    width: 100%;
    height: 16px;
    margin: 0;
    z-index: 99;
    position: relative;
    color:#2C2C2C;
}
.navbar {
    height: 16px;
    padding: 0;
    margin: 0;
    float:right;
    margin-top:20px;
}
.navbar > li {
    height: auto;
    float: left;
    text-align: center;
    list-style: none;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    padding: 0;
    margin-left:17px;
}
.navbar a {
    text-decoration: none;
    color: black;
    display: block;
}
.navbar > li:hover {
    color: #6D4B78;
}
.navbar > a:hover {
    color: #6D4B78;
}
.navbar li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
}
.navbar li:hover ul {
    display: block;
}
.navbar li ul li {
    min-height:12px;
    padding: 8px 5px;
}
.navbar > li > ul > li:hover {
    background: none repeat scroll 0 0 #664670;
    color:#FFFFF;
}

我的问题是这样的：

当我将鼠标悬停在福利上时，该元素正在重新调整大小。本质上，它正在增长以匹配LI大于它的子元素（下拉列表中的 s）的宽度。

我希望Benefits元素是固定宽度的，并且我没有为UL元素分配任何大小。

为了澄清，我希望我的溢出看起来像这样：

但是，目前，当不悬停时，我得到了这个：

悬停时，我得到了这个：

我需要做什么来修复它？

Answer 1

像这样，非常基本的下拉菜单。您可以将 left 或 right 设置为 0 或任何您喜欢的值。如果您的菜单在屏幕的右侧，那么设置 right 0 可能会更好

http://jsfiddle.net/k4Jcq/2/

.navbar li {
  position: relative;     
}
.navbar li ul   
{
  display: none;
  height: auto;                                   
  margin: 0; 
  padding: 0;
  background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
  border: 1px solid #E0E0E0;  
  position: absolute;
  left: 0px;
} 

Answer 2

我遇到了同样的问题。关键是绝对菜单，然后将其放置在您想要的位置。http://jsfiddle.net/cornelas/k4Jcq/embedded/result/

.navbar li ul   
 {
 display: none;
 height: auto;                                   
 margin: 0; 
 padding: 0;
 background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
 border: 1px solid #E0E0E0;  
 position: absolute;
 right: 70px;
 }