不管是在導航欄還是頂部的功能條，基本都會用到二級菜單或者三級菜單等等，今天，就使用原生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>