制作动画二级菜单
下面是学习慕课网上的制作动作二级菜单的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;目前读取到的信息就这么多。
