水平下拉菜单。一般用于网页中的导航栏。
效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用JS制作水平下拉菜单</title>
<style>
*{
padding:0px;margin:0px;}
header{
background:#8f0;
width:100%;
height:100px;
margin-bottom:3px;
position:relative;
}
section{
width:100%;
height:600px;
}
#a1{
background:cyan;
width:30%;
height:600px;
float:left;
margin-right:5px;
}
#a2{
background:#d45;
width:39.5%;
height:600px;
float:left;
}
aside{
background: purple;
width:29.5%;
height:600px;
float:right;
}
footer{
background:#a50;
width:100%;
height:100px;
clear:both;
margin-top:5px;
}
nav{
position:absolute;
left:200px;
top:55px;
}
ul{
list-style: none;}
ul li{
float:left;}
ul li a{
text-align:center;
display:block;
text-decoration: none;
background:#05f;
color:#fff;
font-weight: bold;
height:40px;
line-height:40px;
margin-right: 1px;
padding:0px 10px;
}
ul li a:hover{
background:#f90;}
ul li ul{
margin-top:1px;display:none;}
ul li ul li{
float:none;}
ul li ul li a{
border-bottom:1px solid white;}
/*ul li:hover ul{display:block;}*/
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">学校概况</a></li>
<li><a href="#">管理机构</a></li>
<li onmouseover=showmenu(this) onmouseout=hidemenu(this)><a href="#">院系设置</a>
<ul >
<li><a href="#">电气学院</a></li>
<li><a href="#">安全学院</a></li>
<li><a href="#">材料学院</a></li>
<li><a href="#">能源学院</a></li>
<li><a href="#">计算机学院</a></li>
<li><a href="#">资环学院</a></li>
</ul>
</li>
<li><a href="#">招生就业</a></li>
<li><a href="#">科学研究</a></li>
</ul>
</nav>
</header>
<section>
<article id="a1"></article>
<article id="a2"></article>
<aside></aside>
</section>
<footer></footer>
<script >
function showmenu(obj){
var submenu=obj.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidemenu(obj){
var submenu=obj.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
</body>
</html>
要点：注意ul与li的关系；及其网页每一部分的划分，是否浮动，是相对定位还是绝对定位。