IE6,IE7下z-index属性

最新推荐文章于 2024-09-22 11:17:00 发布

sas5215

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量3k

点赞数

文章标签： ie class function javascript border float

本文链接：https://blog.csdn.net/sas5215/article/details/6987743

版权

主要是通过改变 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>