CSS - 响应式水平导航,下面有子导航

时间:2012-08-23 22:27:14

标签: html css

我有这个水平导航,它按我希望的方式工作:http://jsfiddle.net/rnSY4/

当窗口变小时,主导航项会折叠,推动子导航。

如果子导航UL是其中一个主导航LI的孩子,我更喜欢它,但我无法弄清楚如何做到这一点。我发现的所有解决方案都涉及将position: absolute添加到子导航,这意味着当主导航崩溃时它不会向下移动(我还需要子导航下面的所有内容也向下移动)。 / p>

任何人都有解决方案吗?

1 个答案:

答案 0 :(得分:2)

您只需要删除溢出:从父UL隐藏,将顶级LI设置为具有position:relative(以便相对于它们的下拉位置而不是标题)然后将样式应用于下拉列表。

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

对于跨浏览器合规性,您需要加载一些Javascript以向LI添加悬停事件,以便您可以在IE6上显示下拉列表。