案例分析：
1.导航栏里面的 li 都要有鼠标经过的效果，所以需要循环注册鼠标事件；
2.核心原理：当鼠标经过 li 里面的第二个孩子 ul 显示，当鼠标离开，则 ul 隐藏；
效果展示：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 list-style-type: none; 13 } 14 a { 15 text-decoration: none; 16 font-size: 14px; 17 } 18 .nav { 19 width: 300px; 20 margin: 100px auto; 21 } 22 .nav>li { 23 position: relative; 24 float: left; 25 width: 80px; 26 height: 41px; 27 text-align: center; 28 } 29 30 .nav li a { 31 display: block; 32 width: 100%; 33 height: 100%; 34 line-height: 41px; 35 color: #333; 36 } 37 38 .nav>li>a:hover { 39 background-color: #eee; 40 } 41 42 .nav ul { 43 display: none; 44 position: absolute; 45 top: 41px; 46 left: 0; 47 width: 100%; 48 border-left: 1px solid #FECC5B; 49 border-right: 1px solid #FECC5B; 50 } 51 52 .nav ul li { 53 border-bottom: 1px solid #FECC5B; 54 } 55 56 .nav ul li a:hover { 57 background-color: #FFF5DA; 58 } 59 </style> 60 </head> 61 <body> 62 <ul class="nav"> 63 <li> 64 <a href="">微信</a> 65 <ul> 66 <li><a href="">登录</a></li> 67 <li><a href="">注册</a></li> 68 <li><a href="">退出</a></li> 69 </ul> 70 </li> 71 <li> 72 <a href="">QQ</a> 73 <ul> 74 <li><a href="">登录</a></li> 75 <li><a href="">注册</a></li> 76 <li><a href="">退出</a></li> 77 </ul> 78 </li> 79 <li> 80 <a href="">微博</a> 81 <ul> 82 <li><a href="">登录</a></li> 83 <li><a href="">注册</a></li> 84 <li><a href="">退出</a></li> 85 </ul> 86 </li> 87 </ul> 88 <script> 89 //获取元素 90 var nav=document.querySelector(".nav"); 91 var lis=nav.children; //得到四个小 li 92 for(var i=0;i<lis.length;i++){ 93 lis[i].onmouseover=function(){ 94 this.children[1].style.display="block"; //显示li的第2个孩子 也就是ul的内容 95 } 96 lis[i].onmouseout=function(){ 97 this.children[1].style.display="none"; 98 } 99 } 100 </script> 101 </body> 102 103 </html>