知识点：hover的使用，已经slideToggle的切换效果
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6
7 li {
8 list-style-type: none;
9 }
10
11 a {
12 text-decoration: none;
13 font-size: 14px;
14 }
15
16 .nav {
17 margin: 100px;
18 }
19
20 .nav>li {
21 position: relative;
22 float: left;
23 width: 80px;
24 height: 41px;
25 text-align: center;
26 }
27
28 .nav li a {
29 display: block;
30 width: 100%;
31 height: 100%;
32 line-height: 41px;
33 color: #333;
34 }
35
36 .nav>li>a:hover {
37 background-color: #eee;
38 }
39
40 .nav ul {
41 display: none;
42 position: absolute;
43 top: 41px;
44 left: 0;
45 width: 100%;
46 border-left: 1px solid #FECC5B;
47 border-right: 1px solid #FECC5B;
48 }
49
50 .nav ul li {
51 border-bottom: 1px solid #FECC5B;
52 }
53
54 .nav ul li a:hover {
55 background-color: #FFF5DA;
56 }
57 </style>
58 <ul class="nav">
59 <li>
60 <a href="#">微博</a>
61 <ul>
62 <li>
63 <a href="">私信</a>
64 </li>
65 <li>
66 <a href="">评论</a>
67 </li>
68 <li>
69 <a href="">@我</a>
70 </li>
71 </ul>
72 </li>
73 <li>
74 <a href="#">微博</a>
75 <ul>
76 <li>
77 <a href="">私信</a>
78 </li>
79 <li>
80 <a href="">评论</a>
81 </li>
82 <li>
83 <a href="">@我</a>
84 </li>
85 </ul>
86 </li>
87 <li>
88 <a href="#">微博</a>
89 <ul>
90 <li>
91 <a href="">私信</a>
92 </li>
93 <li>
94 <a href="">评论</a>
95 </li>
96 <li>
97 <a href="">@我</a>
98 </li>
99 </ul>
100 </li>
101 <li>
102 <a href="#">微博</a>
103 <ul>
104 <li>
105 <a href="">私信</a>
106 </li>
107 <li>
108 <a href="">评论</a>
109 </li>
110 <li>
111 <a href="">@我</a>
112 </li>
113 </ul>
114 </li>
115 </ul>
116
117 <script>
118 $(function () {
119 // $(".nav li").mouseover(function () {
120 // $(this).children("ul").slideDown(100)
121 // });
122 // $(".nav li").mouseout(function () {
123 // $(this).children("ul").slideUp(100)
124 // });
125
126 // $(".nav li").hover(function () {
127 // $(this).children("ul").slideDown()
128 // }, function () {
129 // $(this).children("ul").slideUp()
130 // })
131
132 $(".nav li").hover(function () {
133 $(this).children("ul").slideToggle()
134 })
135 })
136 </script>