欢迎光临旭日站长网!
您当前位置:网站首页 >> 网络编程 >> 网页设计 >> CSS >> 导航下拉菜单被banner或flash覆盖(单遮住)解决办法(css法)

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

2013-09-29 21:28:22 来源:旭日站长 浏览:258

动态搞笑图片  每日一笑话,快乐一辈子

下面这效果是从下拉菜单被下面的banner和flash覆盖修正过来效果截图:

解决办法:

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(/xrimg/images/navborder.png) left 13px  no-repeat;position: relative;
z-index: 2;
}

 

.bannerbg{background:url(/xrimg/images/bannerbg.png) no-repeat center top; height:60px; _behavior: url(js/iepngfix.htc); padding-top:378px; position:relative; z-index:1}

 

发表评论
网名:
评论:
验证:
共有0人对本文发表评论查看所有评论(网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
powered by 旭日软件(http://www.webmaster5u.com) 。
威尼斯人官网,旭日软件园-提供免费小软件下载,电脑教程和QQ表情包下载为主要宗旨.同时有网站运营,编程教程,网页特效,手机教程,游戏攻略和IT资讯等内容,打造常用软件下载、内容丰富的站长学习!