主要是通过改变 dl 元素的 父li 的 z-index 属性,当 ul.nav_pro 下的 li 的 z-index 值相同时(默认状态下相同), li 元素 就会 覆盖其子元素 dl , 无论此时 dl 的 z-index 值多大;
解决方案:动态设置 ul.nav_pro 下的 li 的 z-index 值; 鼠标移动到的 li 元素,设置其 z-index 值 大于 其兄弟 li 的 z-index 值 就OK;(知识有限,可能有其他更好方案吧)<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".nav li.nav_pro,.nav li.nav_tech").click(function () {
$(this).children("ul").show();
$(this).siblings("li").children("ul").fadeOut(); //原有显示
});
$(".nav li ul li").hover(function () {
$(this).css("z-index", "9"); //解决ie6,ie7 z-index bug
$(this).addClass("now");
$(this).children("dl").fadeIn();
},
function () {
$(this).children("dl").fadeOut();
$(this).removeClass("now");
$(this).css("z-index", ""); //解决ie6,ie7 z-index bug
});
});
</script>
<style type="text/css">
ul ,li{ margin:0; padding:0; border:0; list-style:none;}
a{color:White;}
#nav { width:204px; border:2px solid #7CB820; margin:0 auto;}
#nav .nav li{ background:green; line-height:24px;}
/*#nav .nav li:hover{ background:url(../images/master.gif) no-repeat -36px -401px ;}--ie6 不识别--*/
#nav .nav li.now{background:red ;}
#nav .nav li ul { display:none;}
#nav .nav li ul li{background:black;}
#nav li.nav_pro ul.nav_pro li {float:none;position:relative;}
#nav li.nav_pro ul.nav_pro dl{ position:absolute; margin:0; width:120px; top:24px;right:0; display:none; z-index:999; }
#nav li.nav_pro ul.nav_pro dl dd{text-align:left;background:gray ;}
</style>
</head>
<body>
<div id="nav">
<ul class="nav">
<li class="nav_pro">
<a href="javascript:void(0);" class="nav_pro_a"><b>低碳产品</b></a>
<ul class="nav_pro">
<li><a href="ProList.aspx?pro=True&cate=节能家电">节能家电</a>
<dl>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=255">电视机</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
</dl>
</li>
<li><a href="ProList.aspx?pro=True&cate=节能家电">节能家电</a>
<dl>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=255">电视机</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
</dl>
</li>
<li><a href="ProList.aspx?pro=True&cate=节能家电">节能家电</a>
<dl>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=255">电视机</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
</dl>
</li>
</ul>
</li>
<li class="nav_tech">
<a href="javascript:void(0);" class="nav_pro_a"><b>低碳技术</b></a>
<ul class="nav_pro">
<li><a href="ProList.aspx?pro=True&cate=节能家电">节能家电</a>
<dl>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=255">电视机</a></dd>
<dd>
<a href="ProList.aspx?pro=True&cid=254">冰箱</a></dd>
</dl>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>