宽度：自动不在下拉导航中工作

Question

要解释这个很难，所以我创建了一个JS-Fiddle所以你们可以看到我的意思......

如果您在“产品”标签下查看列表中的第二个链接，我已经做了很长时间，结果是它溢出了列表的边界。如果链接很长，包含ul的宽度会拉伸以包含链接，我怎么能这样做呢？

再看看JSfiddle会让事情变得更加清晰，以及需要做些什么。

PS - 需要在不编辑HTML的情况下让它工作！

//Ignore this

Answer 1

只需删除列表的固定宽度：

ul li {
    display: block;
    position: relative;
    float: left;
    width: 140px; // <-- Remove this
    height: 25px;    
}

它会使您列表的默认宽度变为自动，您就完成了。

演示：http://jsfiddle.net/Kpxpf/5/

Answer 2

只需将width:140px;更改为min-width:140px;

中的ul li即可

演示：

http://jsfiddle.net/Kpxpf/6/

Answer 3

您正在限制顶级菜单上样式的<li> s的宽度。这会将您的预期width: 140px;保留在顶级菜单上，并允许子菜单根据其内容进行调整。

jsFiddle

ul#menu li ul li {
    width:auto;
}

Answer 4

您正在嵌套列表上设置固定宽度。

将ul li样式更改为：

#menu > li {
    display: block;
    position: relative;
    float: left;
    width: 140px;
    height: 25px;
}

这将从嵌套的ul中删除固定宽度，允许它们根据需要占用尽可能多的空间。

jsFiddle