JS 下拉菜单案例

css代码

 1 .nav {
 2             width: 300px;
 3             height: 400px;
 4             list-style: none;
 5             padding: 0;
 6             margin: 0 auto;
 7         }
 8 
 9         .nav>li {
10             float: left;
11             width: 100px;
12             text-align: center;
13         }
14         .nav>li a {
15             display: block;
16             line-height: 50px;
17             color: rgb(141, 138, 138);
18             text-decoration: none;
19             position: relative;
20         }
21 
22         .nav li ul {
23             display: none;
24             list-style: none;
25             padding: 0;
26             position: absolute;
27             top: 50px;
28             width: 100px;
29         }
30         .nav li ul li {
31             line-height: 40px;
32             text-align: center;
33             cursor: pointer;
34         }
35         .nav li ul li:hover {
36             background-color: blanchedalmond;
37         }

 

 

HTML代码

 1 <ul class="nav">
 2         <li>
 3             <a href="#">微博1</a>
 4             <ul>
 5                 <li>123</li>
 6                 <li>123</li>
 7                 <li>123</li>
 8             </ul>
 9         </li>
10         <li>
11             <a href="#">微博2</a>
12             <ul>
13                 <li>123</li>
14                 <li>123</li>
15                 <li>123</li>
16             </ul>
17         </li>
18         <li>
19             <a href="#">微博3</a>
20             <ul>
21                 <li>123</li>
22                 <li>123</li>
23                 <li>123</li>
24             </ul>
25         </li>
26     </ul>

 

JS代码

 2     var nav = document.querySelector(".nav")
 3     var lis = nav.children;
 4     for (var i = 0; i < lis.length; i++) {
 5         lis[i].onmouseover = function () {
 6             this.children[1].style.display = 'block'
 7         }
 8         lis[i].onmouseout = function () {
 9             this.children[1].style.display = 'none'
10         }
11     }

 效果图

posted @ 2020-04-01 11:28  徐12  阅读(421)  评论(0)    收藏  举报