---恢復內容開始---
之前在網上看到如何用jquery來實現二級下拉菜單，jquery對事件應用的方法都比較直接且簡單高效，但是我們這不利於我們對於原生的JS的理解。在此，我使用原生JS來實現下拉二級菜單。
實現下拉二級菜單的方法有多種
1.給一級菜單和二級菜單設置一個div，並且使其二級菜單部分隱藏。
2.設置好CSS樣式后，給每一個一級菜單都添加一個onmouseover事件和onmouseout事件，這種方法有一個明顯的缺陷，就是當一級菜單比較多的時候，會造成代碼冗余。
3.使用for循環結合children結構偽類選擇器來實現其鼠標移入下拉的功能。
html和css如下所示
<div id="nav"> <ul> <li> <a href="#">html元素</a> <div> <a href="#">list-style</a> <a href="#">decoration</a> <a href="#">line-height</a> </div> </li> <li> <a href="#">js部分</a> <div> <a href="#">事件冒泡</a> <a href="#">跨域</a> <a href="#">ajax</a> </div> </li> <li> <a href="">jquery方法</a> <div> <a href="#">filter</a> <a href="#">has</a> <a href="#">find</a> <a href="#">html</a> </div> </li> </ul> </div>
這里的html使用的實例嵌套div的方法，結構比較簡單。
<style type="text/css"> *{ margin: 0px; padding:0px; font-size: 20px; } #nav{ width:440px; background: #9ACD32; margin:auto; } #nav ul{ list-style: none; } #nav ul li{ width:110px; float: left; } #nav ul li a{ display: block; text-decoration: none; text-align: center; background: #FF9090; } #nav ul li a:hover{ background: #CCCCDD; } #nav ul li div { font-size: 18px; display: none; } #nav ul li div a{ font-size: 16px; line-height: 25px; text-align: center; background: #CCCCDD; transition: background 2s; } #nav ul li div a:hover{ background: #FF9090; font-size:19px; } </style>
以上就是整個代碼的結構層和表現層了，現在為了實現鼠標移入下拉菜單的功能。
<script type="text/javascript"> window.onload=function(){ var aLi=document.getElementById("nav").getElementsByTagName("li"); for(var i=0; i<aLi.length;i++){ aLi[i].onmouseover=function(){ this.children[1].style.display='block';//選取當前li元素的第二個子元素 } aLi[i].onmouseout=function(){ this.children[1].style.display='none'; } } } </script>
在這js代碼中，可能有些人不是很理解this.children[1]的含義，我們在對ul下的li做了for循環之后，需要的是將display為none的div顯示出來，聽過children偽類選擇器可以選擇li的第二個子元素（選擇器部分，可以查w3cshool）。通過這種選擇器，我們在只使用一次for循環就實現了鼠標移入菜單下拉的功能。
---恢復內容結束---
之前在網上看到如何用jquery來實現二級下拉菜單，jquery對事件應用的方法都比較直接且簡單高效，但是我們這不利於我們對於原生的JS的理解。在此，我使用原生JS來實現下拉二級菜單。
實現下拉二級菜單的方法有多種
1.給一級菜單和二級菜單設置一個div，並且使其二級菜單部分隱藏。
2.設置好CSS樣式后，給每一個一級菜單都添加一個onmouseover事件和onmouseout事件，這種方法有一個明顯的缺陷，就是當一級菜單比較多的時候，會造成代碼冗余。
3.使用for循環結合children結構偽類選擇器來實現其鼠標移入下拉的功能。
html和css如下所示
1 <div id="nav"> 2 <ul> 3 <li> 4 <a href="#">html元素</a> 5 <div> 6 <a href="#">list-style</a> 7 <a href="#">decoration</a> 8 <a href="#">line-height</a> 9 </div> 10 </li> 11 <li> 12 <a href="#">js部分</a> 13 <div> 14 <a href="#">事件冒泡</a> 15 <a href="#">跨域</a> 16 <a href="#">ajax</a> 17 </div> 18 </li> 19 <li> 20 <a href="">jquery方法</a> 21 <div> 22 <a href="#">filter</a> 23 <a href="#">has</a> 24 <a href="#">find</a> 25 <a href="#">html</a> 26 </div> 27 </li> 28 </ul> 29 </div>
這里的html使用的實例嵌套div的方法，結構比較簡單。
<style type="text/css"> *{ margin: 0px; padding:0px; font-size: 20px; } #nav{ width:440px; background: #9ACD32; margin:auto; } #nav ul{ list-style: none; } #nav ul li{ width:110px; float: left; } #nav ul li a{ display: block; text-decoration: none; text-align: center; background: #FF9090; } #nav ul li a:hover{ background: #CCCCDD; } #nav ul li div { font-size: 18px; display: none; } #nav ul li div a{ font-size: 16px; line-height: 25px; text-align: center; background: #CCCCDD; transition: background 2s; } #nav ul li div a:hover{ background: #FF9090; font-size:19px; } </style>
以上就是整個代碼的結構層和表現層了，現在為了實現鼠標移入下拉菜單的功能。
<script type="text/javascript"> window.onload=function(){ var aLi=document.getElementById("nav").getElementsByTagName("li"); for(var i=0; i<aLi.length;i++){ aLi[i].onmouseover=function(){ this.children[1].style.display='block';//選取當前li元素的第二個子元素 } aLi[i].onmouseout=function(){ this.children[1].style.display='none'; } } } </script>
在這js代碼中，可能有些人不是很理解this.children[1]的含義，我們在對ul下的li做了for循環之后，需要的是將display為none的div顯示出來，聽過children偽類選擇器可以選擇li的第二個子元素（選擇器部分，可以查w3cshool）。通過這種選擇器，我們在只使用一次for循環就實現了鼠標移入菜單下拉的功能。
