css - 流体设计中的下拉导航，调整页面大小时溢出

Question

我在流畅设计的导航方面遇到了困难。当我缩小页面时，链接会落在我为它们指定的黑条下方。如果我说，

    overflow: hidden;

然后我的下拉列表以及导航末尾的必要链接都被隐藏了。它变得更加复杂，我认为，因为下拉菜单。

有谁知道我可以做些什么来调整我页面的导航栏大小，同时保持所有链接的下拉菜单可见？

这是一把 fiddle http://jsfiddle.net/pFQhm/

Answer 1

您的问题源于使用 float:left; 创建水平菜单。如前所述，使用 float:left; 需要您使用 overflow:hidden; 才能实现动态高度导航。

替代方法是使用 display:inline-block; 而不是 float:left; 以使您的菜单项水平排列。完成后，剩下的就非常简单了。

Here's a basic example of a navigation system using display:inline-block;

因此，在您的情况下，您会:

1. 从 #top_menu 中移除 min-width
2. 从 #top_menu 中删除定义的 height
3. 从 #top_menu li
中删除 float:left;
4. 在 #top_menu li
上将 display:block; 更改为 display:inline-block;
5. 根据需要设置样式

导航项现在根据需要换行，同时仍保持菜单的可见性。

And here's a jsFiddle with your code, modified as suggested.