您的位置：首页 > 其它

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

2010-08-12 18:02 309 查看

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

比如，我用li排出主菜单，而每个li内又放一个display为none的ul来做子菜单，希望鼠标划过某个li项目时那个ul自动显示。
如果主菜单是一行，IE的这个BUG就不会有任何干扰，但当主菜单是多行时，你就会发现前几行主菜单生成的子菜单都会被下几行的主菜单所覆盖（好绕嘴，希望你能明白）。当然，如果对子菜单的z-index进行了设置，在Firefox下就会解决，而在IE下是永远也达不到你要求的效果的。

不过，办法总是有的，且看我来试试

解决思路：鼠标划过某个li时，自动将其z-index值和子菜单的z-index设得比其他主菜单的li高，这样就能解决了！
实现方法：在Firefox下用CSS就能实现，但可惜在IE下不支持li:hover，所以就用一段js程序，单独设一个className为over的类来实现

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



<style type="text/css">

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

#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>

<body onload="addHover('nav')">
<ul id="nav">
<li><span href="#">tag1</span>
<ul><li>sub11</li><li>sub12</li><li>sub13</li></ul>
</li>
<li><span href="#">tag2</span>
<ul><li>sub21</li><li>sub22</li><li>sub23</li></ul>
</li>
<li><span href="#">tag3</span>
<ul><li>sub31</li><li>sub32</li><li>sub33</li></ul>
</li>
<li><span href="#">tag4</span>
<ul><li>sub41</li><li>sub42</li><li>sub43</li></ul>
</li>
</ul>
</body>

<script language="javascript">

//这个程序是用来为每个主菜单项目加上事件的，只在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].onmouseover=function(){
this.className+="over";
}
list[i].onmouseout=function(){
this.className=this.className.replace("over","");
}
}
}
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航