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

Question

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

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

我该如何解决？

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

这是一个 DEMO . (将鼠标悬停在元素上)

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/