html - CSS — 响应式水平导航，下方有子导航

Question

我有这个水平导航，它按我想要的方式工作:http://jsfiddle.net/rnSY4/

当窗口变小时，主导航项会折叠，将子导航向下推。

如果子导航 UL 是主要导航 LI 之一的子项，我会更喜欢它，但我不知道该怎么做。我找到的所有解决方案都涉及将 position: absolute 添加到子导航，这意味着当主导航折叠时它不会向下移动(我还需要子导航下方的所有内容向下移动以及)。

谁有解决办法？

Answer 1

您只需从父 UL 中删除 overflow:hidden，将顶层 LI 设置为 position:relative(这样下拉菜单的位置相对于它们而不是标题)，然后将样式应用于下拉菜单。

http://jsfiddle.net/rnSY4/1/

为了跨浏览器合规性，您需要加载一些 Javascript 以将悬停事件添加到 LI，以便您可以在 IE6 上显示下拉菜单。