JS 下拉菜单案例

css代码

 .nav {
             width: 300px;
             height: 400px;
             list-style: none;
             padding:;
             margin: 0 auto;
         }

         .nav>li {
             float: left;
             width: 100px;
             text-align: center;
         }
         .nav>li a {
             display: block;
             line-height: 50px;
             color: rgb(141, 138, 138);
             text-decoration: none;
             position: relative;
         }

         .nav li ul {
             display: none;
             list-style: none;
             padding:;
             position: absolute;
             top: 50px;
             width: 100px;
         }
         .nav li ul li {
             line-height: 40px;
             text-align: center;
             cursor: pointer;
         }
         .nav li ul li:hover {
             background-color: blanchedalmond;
         }

HTML代码

 <ul class="nav">
         <li>
             <a href="#">微博1</a>
             <ul>
                 <li>123</li>
                 <li>123</li>
                 <li>123</li>
             </ul>
         </li>
         <li>
             <a href="#">微博2</a>
             <ul>
                 <li>123</li>
                 <li>123</li>
                 <li>123</li>
             </ul>
         </li>
         <li>
             <a href="#">微博3</a>
             <ul>
                 <li>123</li>
                 <li>123</li>
                 <li>123</li>
             </ul>
         </li>
     </ul>

JS代码

     var nav = document.querySelector(".nav")
     var lis = nav.children;
     for (var i = 0; i < lis.length; i++) {
         lis[i].onmouseover = function () {
             this.children[1].style.display = 'block'
         }
         lis[i].onmouseout = function () {
             this.children[1].style.display = 'none'
         }
     }

效果图