CSS菜单子项强制父元素调整大小

Question

CSS菜单子项强制父元素调整大小

3

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

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>

And 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;
}

我的问题是：

当我将鼠标悬停在“Benefits”上时，该元素会重新调整大小。实际上，它正在增长以匹配其子元素的宽度（下拉菜单中的LI），而这些元素比它自己更大。

我想让“Benefits”元素具有固定宽度，并且我没有为UL元素分配任何大小。

要澄清一下，我希望我的溢出效果如下所示： enter image description here

不过，当前情况是，当未悬停时，我得到这个： enter image description here

当悬停时，我得到这个： enter image description here

我需要做什么来解决它？

- user2286580

我在这里使用了纯CSS。请问有谁知道如何停止我的Benefits元素在鼠标悬停时扩展？谢谢。 - user2286580

下拉菜单需要绝对定位，这样您的容器就不会扩展。 - Huangism

但是我有7个类似的列表，我必须将它们全部定位。我想要除了绝对定位之外的其他方法。 - user2286580

你可以将CSS中的所有元素设置为left: 0或right: 0。 - Huangism

2个回答

0

我曾经遇到过这个问题。关键是将菜单绝对定位，然后放置在您想要的位置。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;
 }

- Cam

但是“开始”下拉菜单也在“优势”下面。 - user2286580

下拉菜单的容器需要设置为相对定位。 - Huangism

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Huangism · Accepted Answer

像这样的，非常基本的下拉菜单。您可以将左侧或右侧设置为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;
}