【转】绕过IE的z-index BUG显示多级菜单一个方法

最新推荐文章于 2021-07-16 16:06:42 发布

aidenliu

最新推荐文章于 2021-07-16 16:06:42 发布

阅读量1.3k

点赞数

分类专栏： HTML/CSS 文章标签： ie firefox function javascript css list

HTML/CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

IE有个很讨厌的z-index BUG，具体表现就是，子节点会继承父节点的z-index，而且不能设置高于这个值的z-index，从而也就使子节点永远不会叠放在父节点上，这对一些实际的应用、例如多级菜单是很不方便的。

比如，我用li排出主菜单，而每个li内又放一个display为none的ul来做子菜单，希望鼠标划过某个li项目时那个ul自动显示。

如果主菜单是一行，IE的这个BUG就不会有任何干扰，但当主菜单是多行时，你就会发现前几行主菜单生成的子菜单都会被下几行的主菜单所覆盖（好绕嘴，希望你能明白）。当然，如果对子菜单的z-index进行了设置，在Firefox下就会解决，而在IE下是永远也达不到你要求的效果的。

不过，办法总是有的，且看我来试试绕过IE的z-index <wbr>BUG显示多级菜单一个方法

解决思路：鼠标划过某个li时，自动将其z-index值和子菜单的z-index设得比其他主菜单的li高，这样就能解决了！

实现方法：在Firefox下用CSS就能实现，但可惜在IE下不支持li:hover，所以就用一段js程序，单独设一个className为over的类来实现

贴出来源代码让大家参考参考

/*主菜单的属性，没什么特别的*/

#nav{
width: 220px;
display: block;
padding: 0px;
margin: 0px;
}

/*主菜单项目的属性，也没什么特别的，z-index:0也可以不设，写出来只是为了便于理解*/

#nav li{
width: 100px;
margin:0px;
padding:0px;
z-index:0;
display: inline;
float: left;
}

/*这是主菜单的标签，没什么*/

#nav li span{
display: block;
width: 98px;
margin: 0px;
padding:2px;
background-color: #fff;
text-decoration: none;
border:1px solid #000;
color: #000;
text-align: center;
}

/*重要的在这里！鼠标划进主菜单项目时，其z-index变大。但IE不支持li:hover，这里再设一个名为over的li类*/

#nav li:hover, #nav li.over{
z-index:2;
}

/*鼠标划过时显示子菜单的，同样把其z-index加大*/

#nav li:hover ul, #nav li.over ul{
display: block;
z-index:2;
}

/*子菜单原始的样子*/

#nav li ul{
display: none;
width: 150px;
background-color: #eee;
position: absolute;
border: 1px solid #333;
margin: 0px;
padding:2px;
float: left;
}
</style>

//这个程序是用来为每个主菜单项目加上事件的，只在IE下运行，Firefox用不着

//由于IE不支持li:hover，故当鼠标划过li时，把其className改为"over"，用CSS同样实现li:hover的效果；而当鼠标划出时，再将className清除

//这段程序是改的mysimon.com网站上的一段程序
function addHover(nav){
//document.all仅在ie下才有，所以此段程序仅在IE下才运行
if(document.all && document.getElementByIdx(nav).currentStyle){
  var navroot=document.getElementByIdx(nav);
  if(navroot!=null){
   list=navroot.getElementsByTagName_r("li");
   for(var i=0; i<list.length; i++){
    //设置每一个主菜单项目，将其onmouseover时的classname改为"over"，而mouseout时清除classname
    list[i].οnmοuseοver=function(){
     this.className+="over";
    }
    list[i].οnmοuseοut=function(){
     this.className=this.className.replace("over","");
    }
   }
  }
}
}
</script>