下拉菜单

案例分析：
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>
posted on 2020-03-13 15:52 SailorM 阅读(211) 评论(0) 编辑收藏举报