导航下拉菜单被banner或flash覆盖(单遮住)解决办法(css法)
解决办法:
z-index和父标签(或者祖先)的position属性有关,比如a为下拉菜单的父标签,b为banner的父标签,a和b属于兄弟关系,
关系如下:
a > 下拉菜单
b > banner
此时这样设置css可以解决a下的元素被b下的banner遮罩的问题
a{position:relative;z-index:2},
b{position:relative;z-index:1}
下面附上这里我修改的样式:
<li class="mainlevel"><a href="news.php" title="新闻资讯">新闻资讯</a> | |
<ul> | |
<li><a href="news.php?tid=1" title="公司资讯">公司资讯</a></li> | |
<li><a href="news.php?tid=2" title="行业资讯">行业资讯</a></li> | |
</ul> | |
</li> |
<div class="bannerbg" >
<div class="ban">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1440" height="420">
<param name="movie" value="swf/1.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="swf/1.swf" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1440" height="420"></embed>
</object>
</div>
#nav .mainlevel {float:left; height:57px; line-height:57px; width:97px; text-align:center; background:url(../images/navborder.png) left 13px no-repeat;position: relative;
z-index: 2;}
.bannerbg{background:url(../images/bannerbg.png) no-repeat center top; height:60px; _behavior: url(js/iepngfix.htc); padding-top:378px; position:relative; z-index:1}
转自: