不管是在导航栏还是顶部的功能条，基本都会用到二级菜单或者三级菜单等等，今天，就使用原生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(){16var oUl1 = document.getElementById('ul1');17var aLi = oUl1.getElementsByTagName('li');//获取所以的li18var timer = null;//设置定时器19 20//遍历所有的li21for(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> ▶</span>62<ul class="graSon">63 <li>10月份</li>64 <li>9月份</li>65 <li>8月份</li>66</ul>67 </li>68 <li></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>
