1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;list-style:none;} 8 nav{margin: 0 auto;width:600px;height: 40px;background-color: #eee;} 9 nav ul li{float: left;line-height: 40px;text-align: center;position: relative;} 10 nav ul li a{text-decoration: none;color:#000;display: block;padding:0 30px;height: 40px;} 11 a:hover{color: #fff;background-color: #ccc;} 12 ul li ul li{float: none;height: 30px;line-height: 30px;background-color: #eee;margin-top: 2px;} 13 ul li ul li a{height: 30px;width: 90px;padding: 0;text-align: center;} 14 ul li ul{position: absolute;top: 40px;left: 0;display: none;} 15 ul li:hover ul{display: block;} 16 </style> 17 </head> 18 <body> 19 <nav> 20 <ul> 21 <li><a href="">首页</a></li> 22 <li><a href="">课程</a> 23 <ul> 24 <li><a href="">html</a></li> 25 <li><a href="">css</a></li> 26 <li><a href="">javascript</a></li> 27 <li><a href="">php</a></li> 28 <li><a href="">MySql</a></li> 29 </ul> 30 </li> 31 <li><a href="">学习内容</a></li> 32 <li><a href="">经典案例</a></li> 33 <li><a href="">关于我们</a></li> 34 </ul> 35 </nav> 36 </body> 37 </html>
原文：http://www.cnblogs.com/qianjilou/p/6403811.html
