<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用HTML和CSS实现下拉列表</title>
<style>
/*导航栏的样式*/
*{margin:0;padding:0;}
#nav{background-color:#eee;width:500px;height:40px;margin:0 auto;}
ul{list-style-type:none;}
ul li{float:left;width:100px;line-height:40px;text-align:center;position:relative;}
a{text-decoration:none;color:#000;display:block;height:40px;width:100px;}
a:hover{color:#fff;background-color:#666;}
/*下拉菜单部分*/
ul li ul{position:absolute;left:0px;top:40px;display:none;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul li a:hover{background-color:#06f;}
/*实现下拉菜单显示*/
ul li:hover ul{display:block;}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">经典案例</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery </a></li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">最新版本</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
原文：http://www.cnblogs.com/webljx/p/5027512.html