实现菜单延迟一秒缩回功能

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_30488313

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/kevin2013/archive/2010/06/26/1765692.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>JavaScript下拉菜单</title>
	<style type="text/css">
		* {
			padding:0; 
			margin:0;
		}
		body {
			font-family:verdana, sans-serif; 
			font-size:small;
		}
		#navigation, #navigation li ul {
			list-style-type:none;
		}
		#navigation {
			margin:20px;
		}
		#navigation li {
			float:left;
			text-align:center;
			position:relative;
		}
		#navigation li a:link, #navigation li a:visited {
			display:block; 
			text-decoration:none; 
			color:#000; 
			width:120px; 
			height:40px; 
			line-height:40px; 
			border:1px solid #fff; 
			border-width:1px 1px 0 0; 
			background:#c5dbf2; 
			padding-left:10px; 
		}
		#navigation li a:hover {
			color:#fff;
			background:#2687eb;
		}
		#navigation li ul li a:hover {
			color:#fff;
			background:#6b839c; 
		}
		#navigation li ul {
			display:none;
			position:absolute; 
			top:40px;
			left:0;
			margin-top:1px;
			width:120px;
		}
		#navigation li ul li ul {
			display:none;
			position:absolute; 
			top:0px;
			left:130px; 
			margin-top:0;
			margin-left:1px;
			width:120px;
		}
	</style>
	<script type="text/javascript">
                var timer = {};
		function displaySubMenu(li) {
                        clearTimeout( timer );
			var subMenu = li.getElementsByTagName("ul")[0];
			subMenu.style.display = "block";
		}
		function hideSubMenu( li ) {
			var subMenu = li.getElementsByTagName("ul")[0];
			timer = setTimeout(function(){
                                    subMenu.style.display = "none";
                                    clearTimeout( timer); //接下便便要擦屁屁！
                                },1000)                     
		}
	</script>
</head>
<body>
	<ul id="navigation">
		<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
			<a href="http://www.02web.com/hublog/">点我吧，囧</a>	
			<ul>
				<li><a href="#">栏目1->菜单1</a></li>
				<li><a href="#">栏目1->菜单2</a></li>
				<li><a href="#">栏目1->菜单3</a></li>
				<li><a href="#">栏目1->菜单4</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

转载于:https://www.cnblogs.com/kevin2013/archive/2010/06/26/1765692.html