<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#menu{
width: 600px;
height: 40px;
margin: 0 auto;
background-color: blue;
}
ul{list-style: none;}
ul li{float: left;
margin-left: 6px;
margin-right: 6px;
line-height: 40px;
position:relative;
border-right: 1px solid white;
}
a{
text-decoration: none;
display: block;
}
ul li ul {
position: absolute;
display: none;
}
ul li ul li{
float: none;
margin-top: 1px;
background-color: blue;
}
.no{ border-width: 0px; }
</style>
<script type="text/javascript">
function showsubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">学院概况</a></li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">学院风景</a>
<ul>
<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>
<li class="no"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
