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>
时间如白驹过隙,忽然而已,且行且珍惜......