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），它们比它大。

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

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

目前，当没有徘徊时，我明白了：

当徘徊时，我明白了：

我需要做些什么来解决它？

Answer 1

像这样的东西，非常基本的下拉菜单。您可以将左或右设置为0或您喜欢的任何内容。如果您的菜单位于屏幕右侧，则设置为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;
 }