IE6下Z-index無效/不相容/失效的解決辦法【絕對原創】

css

 

@charset "gb2312";
*{ margin:0; padding:0}
.clear{ clear:both;}
li{ list-style-type:none;}
.box {
 height: 300px;
 width: 300px;
 margin: 0 auto;
}
.box .test {
 display: none;
 background-color: #FFE8E8;
 border: 1px solid #FF0000;
 position: absolute;
 width: 100px;
 height: 50px;
 z-index: 999;
 left: 0px;
}
.box li {
 float: left;
 width: 100px;
 text-align: center;
}
.box a {
 color: #333333;
 text-decoration: none;
 font-weight: bold;
 display: block;
 line-height: 30px;
 background-color: #CCCCCC;
 z-index: 0;
}
.box a:hover {
 color: #FFFFFF;
 background-color: #006699;
}

 

 

 

 

 

 

html代碼

 

<div class="box">
<ul>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div></li>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div>
</li>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div>
</li>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div>
</li>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div>
</li>
<li><a href="#">連結一</a><div class="test">拉的積分垃圾速度快浪費</div>
</li>
</ul>
</div>
</body>
</html>
<script>
$('.box a').hover(function(){$(this).next('div').show();},function(){$(this).next('div').hide();});
$('.box a').next('div').hover(function(){$(this).show();$(this).prev('a').addClass('cur');},function(){$(this).hide();$(this).prev('a').removeClass('cur');});
$('.box li').hover(function(){$(this).css('position','relative');},function(){$('li').css('position','');});
</script>