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

Question

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

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

如果子导航 UL 是主要导航 LI 之一的子导航，我会更喜欢它，但我不知道该怎么做。我发现的所有解决方案都涉及添加position: absolute到子导航，这意味着当主导航崩溃时它不会向下移动（我还需要子导航下方的所有内容也向下移动）。

有人有解决方案吗？

Answer 1

您只需要从父 UL 中删除溢出：隐藏，将顶级 LI 设置为具有 position:relative （这样下拉菜单相对于它们的位置而不是标题），然后将样式应用于下拉菜单。

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

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