1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ margin:0px; padding:0px;} 8 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} 9 ul{ list-style:none;} 10 ul li{ float:left; line-height:40px; text-align:center; position:relative;} 11 a{ text-decoration:none; color:#000; display:block; width:90px;} 12 a:hover{ color:#FFF; background-color:#666;} 13 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 14 ul li ul{ width:90px; position:absolute; left:0px; top:40px; display:none;} 15 16 </style> 17 <script src="js/jquery.1.9.1.js"></script> 18 19 <script type="text/javascript"> 20 $(function(){ 21 $(".navmenu").mouseover(function(){ 22 $(this).children("ul").show(); 23 24 25 }) 26 $(".navmenu").mouseout(function(){ 27 28 $(this).children("ul").hide(); 29 30 }) 31 32 }) 33 34 </script> 35 36 </head> 37 38 <body> 39 <div id="menu"> 40 <ul> 41 42 <li><a href="#">首页</a></li> 43 <li class="navmenu"><a href="#">课程大厅</a> 44 <ul> 45 <li><a href="#">JavaScript</a></li> 46 <li><a href="#">jQuery</a></li> 47 </ul> 48 49 </li> 50 <li class="navmenu"><a href="#">学习中心</a> 51 <ul> 52 <li><a href="#">视频学习</a></li> 53 <li><a href="#">案例学习</a></li> 54 <li><a href="#">交流平台</a></li> 55 </ul> 56 </li> 57 <li><a href="#">经典案例</a></li> 58 <li><a href="#">关于我们</a></li> 59 60 </ul> 61 62 63 </div> 64 </body> 65 </html>
效果图：
