**
方法一：纯css实现下拉菜单
**
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
#nav ul{/*去掉点点*/
list-style: none;
}
#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
float: left;
line-height: 40px;
text-align: center;
position: relative;/*给子ul定位用的*/
}
#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/
text-decoration: none;
color:#000;
padding:0 10px;
display: block;
}
#nav ul li a:hover{
color: #fff;
background-color: #666;
}
#nav ul li ul {
position: absolute;/*相对于父li的位置进行定位*/
left: 0;
top:40px;
display: none;/*隐藏下拉菜单*/
}
#nav ul li ul li{
float: none;
background-color:red;
}
#nav ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<div 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></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>**
方法二：js实现下拉菜单
**
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/
background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
#nav ul{/*去掉点点*/
list-style: none;
}
#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/
float: left;
line-height: 40px;
text-align: center;
position: relative;/*给子ul定位用的*/
}
#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/
text-decoration: none;
color:#000;
padding:0 10px;
display: block;
}
#nav ul li a:hover{
color: #fff;
background-color: #666;
}
#nav ul li ul {
position: absolute;/*相对于父li的位置进行定位*/
left: 0;
top:40px;
display: none;
}
#nav ul li ul li{
float: none;
background-color:#eee;
}
</style>
<!--js代码-->
<script>
<!--显示-->
function show(li){
var sub=li.getElementsByTagName("ul")[0];
sub.style.display="block";
}
<!--隐藏-->
function hide(li){
var sub=li.getElementsByTagName("ul")[0];
sub.style.display="none";
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<!--onmouseover onmouseout-->
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li onmouseover="show(this)" onmouseout=""><a href="#">关于我们</a>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Jquery</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>