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 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 });