1 <style type="text/css">
2 ul,li,body{margin:0;padding: 0;}
3 #nav{width: 500px;margin: 10px auto;}
4 ul li{list-style: none;}
5 .clear{clear: both;}
6 #nav>li{float: left;position: relative;}
7 li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
8 li a:hover{background: #c66;color: #fff;}
9 li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
10 style>
11 <body>
12 <ul id="nav">
13 <li>
14 <a href="#">一级菜单a>
15 <ul class="subNav">
16 <li><a href="#">二级菜单a>li>
17 <li><a href="#">二级菜单a>li>
18 <li><a href="#">二级菜单a>li>
19 <li><a href="#">二级菜单a>li>
20 ul>
21 li>
22 <li>
23 <a href="#">一级菜单a>
24 <ul class="subNav">
25 <li><a href="#">二级菜单a>li>
26 <li><a href="#">二级菜单a>li>
27 <li><a href="#">二级菜单a>li>
28 <li><a href="#">二级菜单a>li>
29 ul>
30 li>
31 <li><a href="#">一级菜单a>li>
32 <li><a href="#">一级菜单a>li>
33 <li><a href="#">一级菜单a>li>
34 <div class="clear">div>
35 ul>
36 <script type="text/Javascript">
37 var nav=document.getElementById("nav");
38 var oLi=nav.getElementsByTagName("li");
39 //console.log(oLi.length);
40 for(var i=0;i<oLi.length;i++){
41 oLi[i].onmouseover=function(){
42 var oUl=this.getElementsByTagName("ul")[0];
43 if(oUl){
44 var This=oUl;
45 clearInterval(This.time);
46 This.time=setInterval(function(){
47 This.style.height=This.offsetHeight+10+"px";
48 if(This.offsetHeight>=150){
49 clearInterval(This.time);
50 }
51 },10);
52 }
53 }
54 oLi[i].onmouseout=function(){
55 var oUl=this.getElementsByTagName("ul")[0];
56 if(oUl){
57 var This=oUl;
58 clearInterval(This.time);
59 This.time=setInterval(function(){
60 This.style.height=This.offsetHeight-10+"px";
61 if(This.offsetHeight<=0){
62 clearInterval(This.time);
63 }
64 },10);
65 }
66 }
67 }
68 script>
京公网安备 11010802041100号