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