在<UL>下拉菜单中添加边框

Question

我正在尝试配置一个基于 CSS 的下拉菜单。

我在<UL>周围添加了一个边框，并希望它成为所有<li>的容器。它工作正常，直到其中一个<li>比其他长。它向边界之外推进<UL>。

我该如何解决它？

此外，<li>中的文本在IE中消失，而在FF中一切正常。

这是一个演示。（将鼠标悬停在项目上）

Answer 1

您当前已将width:100%设置为子菜单下拉列表，这将仅100%父容器，该父容器小于由于white-space:nowrap属性而溢出容器的子菜单列表项。只需删除该宽度声明，您的子菜单应随其内部内容展开。

#nav ul {
    left: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 598;
}

此外，您不希望向左浮动子菜单项，以便可以将该属性移动到使用子选择器的位置。

演示：http://jsfiddle.net/DqTyh/8/

Answer 2

除了 float 、 display 和 postion 之外，将所有样式从 LI 标签移动到 A 标签，并在A标签上使用display:block。

请参阅我的教程：http://preview.moveable.com/JM/ilovelists/

Answer 3

好吧，您正在菜单项上声明设置宽度。这会导致任何内部元素中的约束。由于他们更宽，他们别无选择，只能推出边界。

去掉设定的宽度，你应该没问题。