js效果下拉菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         li{
 9             list-style: none;
10         }
11         a{
12             text-decoration: none;
13         }
14         .nav>li{
15             float: left;
16         }
17         .nav>li>a{
18             margin-left: 40px;
19         }
20         .nav>li>ul{
21             display: none;
22         }
23         .red{
24             background-color: red;
25         }
26     </style>
27 </head>
28 <body>
29     <ul class="nav">
30         <li>
31             <a href="">微博</a>
32             <ul>
33                 <li><a href="">私信</a></li>
34                 <li><a href="">评论</a></li>
35                 <li><a href="">@我</a></li>
36             </ul>
37         </li>
38         <li>
39             <a href="">微博2</a>
40             <ul>
41                 <li><a href="">私信2</a></li>
42                 <li><a href="">评论2</a></li>
43                 <li><a href="">@我2</a></li>
44             </ul>
45         </li>
46         <li>
47             <a href="">微博3</a>
48             <ul>
49                 <li><a href="">私信3</a></li>
50                 <li><a href="">评论3</a></li>
51                 <li><a href="">@我3</a></li>
52             </ul>
53         </li>
54     </ul>
55     <script>
56         var nav=document.querySelector('.nav');
57         var lis=nav.children;
58         for(var i=0;i<=lis.length;i++){
59             lis[i].setAttribute('index',i);
　　　　　　　　　//鼠标进入事件
60            lis[i].onmouseover = function() {
61                console.log(lis[i]);
62                this.children[1].style.display='block';
63                this.children[0].style.backgroundColor='red'; 
64            }
　　　　　　　　　//鼠标离开事件
65            lis[i].onmouseout = function() {
66                this.children[1].style.display='none';
67                this.children[0].style.backgroundColor='';
68            }
69         }
70     </script>
71 </body>
72 </html>
时间如白驹过隙，忽然而已，且行且珍惜......