HTML

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=" utf-8">
 5 <meta name="author" content="/" />
 6 <title>点击实现下拉菜单的隐藏与显示</title>
 7 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 8 <script src="index.js"></script>
　　<link type="stylesheet" type="text/css" href="style.css" />
 9 </head>
10 <body>
11 <div>
12   <ul class="nav">
13     <li>
14       <a href="#">蚂蚁部落</a>
15       <ul>
16         <li>DIV+CSS专区</li>
17         <li>jQuery专区</li>
18         <li>搜索优化</li>
19         <li>站长交流</li>
20       </ul>
21     </li>
22     <li>
23       <a href="#">站长交流</a>
24       <ul>
25         <li>DIV+CSS专区</li>
26         <li>jQuery专区</li>
27         <li>搜索优化</li>
28         <li>站长交流</li>
29       </ul>
30     </li>
31     <li>
32       <a href="#">站长交流</a>
33       <ul>
34         <li>DIV+CSS专区</li>
35         <li>jQuery专区</li>
36         <li>搜索优化</li>
37         <li>站长交流</li>
38       </ul>
39     </li>
40     <li>
41       <a href="#">站长交流</a>
42       <ul>
43         <li>DIV+CSS专区</li>
44         <li>jQuery专区</li>
45         <li>搜索优化</li>
46         <li>站长交流</li>
47       </ul>
48     </li>
49   </ul>
50 </div>
51 </body>
52 </html>

style.css

1 * {
 2   margin: 0px;
 3   padding: 0px;
 4 }
 5 ul {
 6   list-style: none;
 7   margin: 0px auto;
 8   font-size: 14px;
 9 }
10 .nav li {
11   width: 150px;
12   height: 25px;
13   line-height: 25px;
14   text-align: center;
15   float: left;
16   background-color: #ccc;
17   position: relative;
18   //font-size: 14px;
19 }
20 .nav li a {
21   text-decoration: none;
22   color: #666;
23 }
24 .nav li ul {
25   position: absolute;
26   top: 25px;
27   display: none;
28   font-size: 12px;
29 }

index.js

1 $(function(){
2   $('.nav li').hover(function(){
3     $(this).find('ul').css('display', 'block');
4   }, function(){
5     $(this).find('ul').css('display', 'none');
6   });
7 });