1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style>
8 .a{
9 font-size: 14px;
10 font-weight: bold;
11 list-style: none;
12
13 }
14 .a li{
15 float: left;
16 margin-left: 1px;
17
18 }
19 .a li a{
20 text-decoration: none;
21 line-height: 20px;
22 background: #DDDDDD;
23 color: #666666;
24 display: block;
25 width: 80px;
26 text-align: center;
27
28 }
29 /*二级菜单*/
30 .a ul{
31 list-style: none;
32 display: none;
33 padding: 0;
34 position: absolute;
35 }
36 .a li a:hover{
37 background-color: #24748F;
38 color: white;
39 }
40 .note{
41 color: #3C8B3C;
42 display: block;
43 background-color: #24748F;
44 }
45
46
47
48 </style>
49 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
50 <script>
51 $(function(){
52 $('.a li').mouseover(function(){
53 $(this).find('ul').slideDown('1000');
54 });
55 $('.a li').mouseleave(function(){
56 $(this).find('ul').slideUp("slow");
57 });
58 });
59 </script>
60 <body>
61 <ul class="a">
62 <li><a href="#"><span class="note">学习中心</span></a>
63 <ul>
64
65 <li><a href="#">前端课程</a></li>
66 <li><a href="#">后端课程</a></li>
67 </ul>
68 </li>
69
70 <li><a href="#">经典案例</a>
71 <ul>
72 <li><a href="#">前端课程</a></li>
73 <li><a href="#">后端课程</a></li>
74 </ul>
75 </li>
76 <li><a href="#">关于我们</a></li>
77 </ul>
78
79 </body>
80 </html>