1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <style type="text/css" > 9 .menu{ 10 margin:0px auto; 11 width:404px; 12 height:21px; 13 } 14 .menu ul{ 15 margin:0px; 16 padding:0px; 17 } 18 .menu ul li{ 19 position:relative; 20 float:left; 21 list-style:none; 22 padding:2px; 23 border:1px dotted; 24 font-size:14px; 25 width:95px; 26 text-align: center; 27 margin:0px; 28 background:#999999; 29 } 30 .menu ul li ul{ 31 display:none; 32 } 33 .menu ul li:hover ul{ 34 display:block; 35 position: absolute; left: 0px; top: 21px; 36 } 37 </style> 38 <body> 39 <p>下面是一个导航条</p> 40 <div class="menu"> 41 <ul> 42 <li><a href="#">首页</a></li> 43 <li> 44 <a href="#">新闻中心</a> 45 <ul> 46 <li><a href="1#">新手入门</a></li> 47 <li><a href="2#">视频教程</a></li> 48 <li><a href="3#">常见问题</a></li> 49 </ul> 50 </li> 51 <li> 52 <a href="#">学习课程</a> 53 <ul> 54 <li><a href="1#">新手入门</a></li> 55 <li><a href="2#">视频教程</a></li> 56 <li><a href="3#">常见问题</a></li> 57 </ul> 58 </li> 59 <li><a href="#">联系我们</a></li> 60 </ul> 61 </div> 62 </body> 63 </html>
原文：http://www.cnblogs.com/lizhaoyao/p/5332679.html