Js实现下拉菜单

来源：互联网发布：馥绿德雅洗发水知乎编辑：程序博客网时间：2024/05/16 09:02

HTML部分：

<body><div id="nav">    <ul>        <li><a href="#">首页</a></li>        <li class="CourseList"><a href="#">课程大厅</a>            <ul id="courseUl">                <li><a href="#">JavaScript</a></li>                <li><a href="#">Jquery</a></li>                <li><a href="#">Ajax</a></li>                <li><a href="#">AjaxAjaxAjaxAjax</a></li>            </ul>        </li>        <li class="CourseList"><a href="#">学习中心</a>            <ul>                <li><a href="#">JavaScript</a></li>                <li><a href="#">Jquery</a></li>                <li><a href="#">AjaxAjaxAjaxAjax</a></li>            </ul>        </li>        <li><a href="#">经典案例</a></li>        <li><a href="#">关于我们</a></li>    </ul></div></body>

css部分：

*{    margin:0;    padding:0;}#nav{    background-color: #ccc;    width: 600px;    height: 40px;    margin:0 auto;}ul li{    list-style: none;    float: left;    line-height: 40px;    text-align: center;    position: relative;}a{    padding:0 10px;    text-decoration: none;    color: #000;    display: block;/*块级元素*/    height:40px;}a:hover{    color: #fff;    background-color: #666;}ul li ul li{    float: none;    background-color: #eee;    margin-top:2px;}ul li ul{    position:absolute;    left: 0;    top:40px;    display: none;}ul li ul li a:hover{    background-color: #06F;}

js部分：

<script type="text/javascript">        var nav=document.getElementById("nav");        var Ul=nav.getElementsByTagName("ul")[0];        var Li=Ul.children;  //获取元素直接子节点        for(var i= 0,len=Li.length;i<len;i++){            (function(i){                              //立即调用函数                var SecondUlList=Li[i].getElementsByTagName("ul");                if(SecondUlList.length>0){                    Li[i].onmouseover=function(){                        var secondUl=Li[i].getElementsByTagName("ul")[0];                        secondUl.style.display="block";                    }                    Li[i].onmouseout=function(){                        var secondUl=Li[i].getElementsByTagName("ul")[0];                        secondUl.style.display="none";                    }                }            })(i);        }    </script>

0 0