**
要领一：纯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>