下面是学习慕课网上的制作动作二级菜单的HTML代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>动画菜单</title>
6 <style type="text/css">
7 * { margin: 0; padding: 0; font-size: 14px; }
8 a { color: #333; text-decoration: none }
9 ul{ list-style: none; }
10 .nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
11 .nav li { float: left; position:relative; height:30px; width:120px }
12 .nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
13 .subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
14 .subNav li a{ background:#ddd }
15 .subNav li a:hover{ background:#efefef}
16 </style>
17 <script>
18 window.onload=function(){
19 var aLi=document.getElementsByTagName(‘li‘);
20 for(var i=0; i<aLi.length; i++){
21 aLi[i].onmouseover=function(){
22 //鼠标经过一级菜单，二级菜单动画下拉显示出来
23 var usubNav = this.getElementsByTagName(‘ul‘)[0];
24
25 if(usubNav){var This = usubNav;
26 clearInterval(This.time);
27 }
28 This.time = setInterval(function(){
29 This.style.height = This.offsetHeight+16+"px";
30 if(This.offsetHeight>=120){
31 This.height=‘120px‘;
32 clearInterval(This.time);
33 }
34 },30)
35 }
36 //鼠标离开菜单，二级菜单动画收缩起来。
37 aLi[i].onmouseout=function(){
38 var usubNav = this.getElementsByTagName(‘ul‘)[0];
39 if(usubNav){var This = usubNav;
40 clearInterval(This.time);
41 }
42
43 This.time=setInterval(function(){
44 This.style.height = This.offsetHeight-16+"px";
45 if(This.offsetHeight<=0){
46 This.height=0;
47 clearInterval(This.time);
48 }
49 },30)
50 }
51 }
52 }
53 </script>
54 </head>
55 <body>
56 <ul class="nav">
57 <li><a href="#">一级菜单</a>
58 <ul class="subNav">
59 <li><a href="#">二级菜单</a></li>
60 <li><a href="#">二级菜单</a></li>
61 <li><a href="#">二级菜单</a></li>
62 <li><a href="#">二级菜单</a></li>
63 </ul>
64 </li>
65 <li><a href="#">一级菜单</a>
66 <ul class="subNav">
67 <li><a href="#">二级菜单</a></li>
68 <li><a href="#">二级菜单</a></li>
69 <li><a href="#">二级菜单</a></li>
70 <li><a href="#">二级菜单</a></li>
71 </ul>
72 </li>
73 <li><a href="#">一级菜单</a></li>
74 <li><a href="#">一级菜单</a></li>
75 <li><a href="#">一级菜单</a></li>
76 </ul>
77 </body>
78 </html>
text-align: center; 轻松实现文本居中；text-indent:10px;实现文本的缩进；其中nav是导航条的意思；第13行代码，.subNav{},ul本来就是div;后代选择器（descendant selector）又称为包含选择器。第12行中对li的设置宽度、高度，在subNav li中高度和宽度就可以不用设置了。我们需要考虑下拉列表的定位，定位的父级列表是页面的右上角，因为在nav导航条中横向布置的li是下拉列表的父级元素，第13行，subNav是脱离文档流的，同时设置height:0;overflow:hidden;目前读取到的信息就这么多。
时间： 2024-10-08 16:19:12