下拉菜单

css部分

	<style type="text/css">
	#drop_down_list{
		list-style:none;
	}
	#drop_down_list li{
		float:left;
		width:120px;
	}
	#drop_down_list li  a{
		display:block;
		background: #324143;
		color: #EAFFED;
		border-right: 2px white solid;
		text-decoration: none;
	}
	#drop_down_list li a:hover{
		background: #24313C;
	}
	#drop_down_list li ul{
		visibility: hidden;
		float:left;
		padding-left:0px;
		width:120px;
		list-style:none; 
	}
	#drop_down_list li ul li a{
		background: #A9C251;
	}
	#drop_down_list li ul li a:hover{
		background: #8EA344;
	}
	</style>

 

jquery 部分

	<script type="text/javascript">
		var drop_down_ul = 0; 
		var timeout = 1000;
		var close_timer = 0; 
		function cancel_timeout(){
			if(close_timer){
				window.clearTimeout(close_timer);
				close_timer = null; 
			}
		}
		function limsover(){
			cancel_timeout();
			drop_down_close();
			drop_down_ul = $(this).find("ul").eq(0).css("visibility", "visible");
		}
		function drop_down_close(){
			if(drop_down_ul){
				drop_down_ul.css("visibility", "hidden");
			}
		}
		function drop_down_timer(){
			close_timer = window.setTimeout(drop_down_close, timeout);
		}
		$(document).ready(function(){
			$("#drop_down_list > li").bind("mouseover", limsover);
			$("#drop_down_list > li").bind("mouseleave", drop_down_timer);
		});
	</script>

 

 html部分

	<ul id="drop_down_list">
		<li>
			<a href="#">Search Engine</a>
			<ul>
				<li><a href="http://www.baidu.com/">baidu</a></li>
				<li><a href="http://www.google.com/">google</a></li>
			</ul>
		</li>
		<li>
			<a href="#">social network</a>
			<ul>
			<li><a href="http://renren.com/">renren</a></li>
			<li><a href="http://pengyou.com/">pengyou</a></li>
			</ul>
		</li>
	</ul>