css - 添加边框到在下拉菜单中

Question

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

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

我该如何解决？

此外，文本withing<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标签并display:block在A标签上使用。

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

Answer 3

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

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