                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

一是報錯offsetHeight，二是效果不是太好，鼠標(biāo)移除太快會出問題……

代碼見下圖：

<!doctype?html>
<html>
<head>
	<meta?charset="utf-8"?/>
	<style>
	body{
	margin:0;
	padding:0;
}
a{
	text-decoration:?none;
	color:black;
}
nav{
	height:40px;
	width:1200px;
	margin:0?auto;
	line-height:40px;
	background:#ddd;
}
nav?ul{
	margin:0;
	padding:0;
	height:40px;
}
nav?ul?li{
	float:left;	
	list-style:none;
	position:relative;
}
nav?ul?li?a{
	display:block;
	height:40px;
	line-height:40px;
	padding:0?90px;
	background:#eee;
}
nav?ul?li?a:hover{
	background:#aaa;
	color:white;
}
nav?ul?li?ul?li{
	float:none;
}
nav?ul?li?ul{
	position:absolute;
	top:40px;
	left:0;
	display:none;
	height:0;
	overflow:hidden;
}
nav?ul?li:hover?ul{
	display:block;
}
nav?ul?li?ul?li?a{
	padding:0?50px;
}
nav?ul?li:hover?ul?li?ul{
	display:none;
}
nav?ul?li:hover?ul?li{
	position:relative;
}
nav?ul?li:hover?ul?li:hover?ul{
	display:block;
	position:?absolute;
	top:0;
	left:180px;
}
	</style>
	<title>下拉菜單</title>
</head>
<body>
	<nav>
		<ul>
			<li><a?href="">首頁</a></li>
			<li><a?href="">商城中心</a>
				<ul?id="menu">
					<li><a?href="">javascript</a>
						<ul?class="nav3">
							<li><a?href="">daohang1</a></li>
							<li><a?href="">daohang2</a></li>
							<li><a?href="">daohang3</a></li>
						</ul>
					</li>
					<li><a?href="">jquery</a></li>
					<li><a?href="">bootstrap</a></li>
				</ul>
			</li>
			<li><a?href="">新聞中心</a></li>
			<li><a?href="">關(guān)于我們</a>
				<ul>
					<li><a?href="">javascript</a></li>
					<li><a?href="">jquery</a></li>
					<li><a?href="">bootstrap</a></li>
				</ul>
			</li>
			<li><a?href="">聯(lián)系我們</a></li>
		</ul>
	</nav>
<script?type="text/javascript">
window.onload=function(){
	var?lis=document.getElementsByTagName("li");
	for?(var?i?=?0;?i?<?lis.length;?i++)?{
		lis[i].onmouseover=function(){
			var?u=this.getElementsByTagName("ul")[0];
			if(u!=undefined){
				u.style.display="block";
			addH(u.id);
			}
		}
		lis[i].onmouseleave=function(){
			var?u=this.getElementsByTagName("ul")[0];
			if?(u!=undefined)?{
				subH(u.id);
			};
		}
	};
}
	function?addH(id){
		var?ulList=document.getElementById(id);
		var?h=ulList.offsetHeight;
		h+=1;
		if?(h<=130)?{
			ulList.style.height=h+"px";
			clearTimeout("subH('"+id+"')",1);
			setTimeout("addH('"+id+"')",1);
		}
		else{
			return;
		}
		
	}
	function?subH(id){
		var?ulList=document.getElementById(id);
		var?h=ulList.offsetHeight;
		h-=1;
		if?(h>0)?{
			ulList.style.height=h+"px";
			clearTimeout("addH('"+id+"')",1);
			setTimeout("subH('"+id+"')",1);
		}
		else{
			ulList.style.display="none;"
			return
	}
}

</script>
</body>
</html>