html导航下拉菜单被遮住，导航下拉菜单被遮住或显⽰不全问题
html下拉菜单的制作方法
所在和解决办法...
导航下拉菜单被banner遮住/显⽰不全，这种问题是⽼⽣常谈了，经常有新⼿会问，有些⼈做了2、3年的还会经常犯错，⽽且好多⼈还以为是js问题，其实这是基本的css知识。我觉得还是有必要写⼀遍⽂章解释给新⼿们。
⼀、导航下拉菜单被遮住，那是因为层叠关系错误
我们必须理解层叠关系满⾜的2个条件：
1、必须是同级；
2、⼆者分别设定了position:relative 或 absolute 或 fixed；这时候通过设置z-index才有效
看看我们⽐较常见的⽹页布局：
这是下拉菜单
.........
这是焦点图....
错误css
.header{ }
.header .nav{ z-index:9999; height:50px; color:#fff; text-align:center; }
.banner{ position:relative; margin:10px auto; height:300px; }
上⾯css⾥吧nav的z-index设置成9999，但发现下拉还是被挡住，这是因为此时banner设置了position，会在nav上⾯。
想要nav在banner上⾯，就需要向上查，发现nav的外层(header)和banner在同⼀级(满⾜条件1)，
这时候同时设置header和banner的position和z-index，使header在banner上⾯即可，此时nav的z-index已经⽆关重要了。
正确css:
.header{ position:relative; z-index:1 }
.header .nav{ height:50px; color:#fff; text-align:center; }
.banner{ position:relative; z-index:0; margin:10px auto; height:300px; }
例⼦2：
如果你的html结构这样的：
这是下拉菜单
.........
这是焦点图....
那么分别设置header和content的position和z-index，因为2者在最外层并且同级。
其它同理。
⼆、导航下拉菜单显⽰不全是因为外层设置了overflow:hidden
很多时因为⽹页⽐较复杂，层级⽐较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导
致导航下拉菜单显⽰不全，其实只要仔细查就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以⽤其它⽅法，百度css清除浮动就有了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。