导航下拉菜单被banner或flash覆盖(单遮住)解决办法(css法)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iteye_5347/article/details/82573926

 

解决办法:

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}

 

 

转自:

view-source:http://www.webmaster5u.com/html/article_3225.html

展开阅读全文

没有更多推荐了,返回首页