jquery 滚动导航

yeelone 2011-09-26 07:43:20

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

	var mouseover_tid = [];

	var mouseout_tid = [];

 

	$(document).ready(function(){

	

		$("#menus > li").each(function(index){

			$(this).hover(

			

				function(){

				

				

					clearTimeout(mouseout_tid[index]);

					mouseover_tid[index]=setTimeout(function(){

	$(this).find('ul:eq(0)').slideDown(200);},400);

				},

				

		function(){

			var _self=this;

			clearTimeout(mouseover_tid[index]);

			mouseout_tid[index]=setTimeout(function(){

			$(this).find('ul:eq(0)').slideUp(200);

			},400);

		}

			);

		});

		}

	);

</script>

<style type="text/css">

	#wrap ul {text-align:left;}

	#wrap  ul.children {

		display:none;

		padding:0;

		margin:0;

	}

	#wrap ul.children li{

		float:none;

		margin:0;

		padding:0;

	}

	#wrap ul.menus li {

		float:left;

		display:block;

		margin:10px;

	}

	#wrap ul.menus ul {

		position:absolute;

	}

	#wrap ul.children li {

		float:none;

		margin:0;

		padding:0;

	}

</style>



</head>

<body>

<div id="wrap">

<ul id="menus" class="menus">

<li> one </li>

	<ul class="children">

		<li>oneee</li>

		<li>one111</li>

	</ul>

<li> two </li>

	<ul class="children">

		<li>oneee</li>

		<li>one222</li>

	</ul>

<li> three</li>

	<ul class="children">

		<li>oneee</li>

		<li>one333</li>

	</ul>

</ul>

</div>

</body>

</html>



</body>

</html>