下拉菜单 

<!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>

　　

posted @ 2017-11-22 20:36  勤奋的园  阅读(133)  评论(0)    收藏  举报