无限级下拉菜单（树形菜单，二级菜单）
不管是在导航栏还是顶部的功能条，基本都会用到二级菜单或者三级菜单等等，今天，就使用原生JS来实现这种功能，我个人加上了定时器，用户体验会更好。
HTML:
1. 布局清晰
2. 所有的li 都是相对定位
3. 所有的子级列表ul 都是绝对定位
JS分析：
1. 首先获取下拉菜单中的所以的li，然后遍历li，给每一个li加事件，清除定时器 ，不要忘记
2. 事件内套一个setTimeout() ，用来延迟下级菜单的显示时间，防止操作二级菜单，这其中自执行函数或者var that = this 都可以，防止i值错误
3. 获取当前li 下面的第一个ul列表，也就是下级菜单
4. 判断这个ul 列表是否存在，存在就它显示 . 这是关键
5. 鼠标移出事件和移入事件基本一样，移出让当前li下的ul 隐藏。
整体来说，二级菜单没有很强的逻辑性，但是对于初学者来说，这种无限下拉菜单，也并不是很简单，咋一看好像很难，但是希望你踏出这一步。还有一点就是，你的脑子里必须有清晰html结构，元素先不要隐藏，看清楚你的布局。把结构都写清楚了，那么对写js部分也是很有帮助的
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ margin:0; padding:0; list-style:none;} 8 #ul1 li{ width:100px; height:30px; line-height:30px; text-align:center; float:left; border:1px solid #000; background:#ccc; position:relative;} 9 #ul1 li:hover{ background:#f60;} 10 .son{ display:none;} 11 .graSon{ display:none;position:absolute; left:100px; top:-1px;} 12 13 </style> 14 <script> 15 window.onload = function(){ 16 var oUl1 = document.getElementById('ul1'); 17 var aLi = oUl1.getElementsByTagName('li');//获取所以的li 18 var timer = null;//设置定时器 19 20 //遍历所有的li 21 for(var i = 0;i < aLi.length; i++){ 22 //给每一个li加鼠标移入事件 23 aLi[i].onmouseover = function(){ 24 clearTimeout(this.timer);//先清除定时器 25 var that = this;// 用that 代替this 在定时器中使用 26 this.timer = setTimeout(function(){ 27 //获取当然li下面的第一个ul列表即下级菜单 28 var oUl =that.getElementsByTagName('ul')[0]; 29 //判断列表是否存在，存在就让它显示 30 if(oUl){ 31 oUl.style.display = 'block'; 32 } 33 },300); 34 } 35 // 鼠标移出事件 36 aLi[i].onmouseout = function(){ 37 clearTimeout(this.timer); 38 var that = this; 39 this.timer = setTimeout(function(){ 40 var oUl =that.getElementsByTagName('ul')[0]; 41 if(oUl){ 42 oUl.style.display = 'none'; 43 } 44 },300); 45 } 46 } 47 } 48 </script> 49 </head> 50 <body> 51 <ul id="ul1"> 52 <li>首页</li> 53 <li> 54 <span>公司简介 ▼</span> 55 <ul class="son"> 56 <li>大事记</li> 57 <li> 58 <span>领导致辞 ▶</span> 59 <ul class="graSon"> 60 <li> 61 <span>2013年 ▶</span> 62 <ul class="graSon"> 63 <li>10月份</li> 64 <li>9月份</li> 65 <li>8月份</li> 66 </ul> 67 </li> 68 <li>2012年</li> 69 </ul> 70 </li> 71 <li>企业文化</li> 72 </ul> 73 </li> 74 <li>联系我们</li> 75 <li> 76 <span>产品展示 ▼</span> 77 <ul class="son"> 78 <li>康师傅</li> 79 <li>老谭</li> 80 <li>今麦郎</li> 81 </ul> 82 </li> 83 </ul> 84 </body> 85 </html>
