下拉菜单

[javascript]代码库

javascript 原生代码
<ul class="nav">
<li><a href="/">&nbsp;首页&nbsp;</a></li>
<li id="li_1" onmouseover="show(1)" onmouseout="hide(1)"><a href="http://www.wufangbo.com/category/css/">css</a> 
	<dl id="dl_1">
    	<dd><a href="#">老凡CSS</dd>
        <dd><a href="#">中凡CSS</dd>
        <dd><a href="#">小凡CSS</dd>
    </dl>
</li>
<li id="li_2" onmouseover="show(2)" onmouseout="hide(2)"><a href="http://www.wufangbo.com/category/css3-html5/">css3</a> 
	<dl id="dl_2">
    	<dd><a href="#">老凡CSS</dd>
        <dd><a href="#">中凡CSS</dd>
        <dd><a href="#">小凡CSS</dd>
    </dl>
</li>
<li><a href="http://www.wufangbo.com/category/javascript/">javascript</a> </li>
<li><a href="http://www.wufangbo.com/category/jquery/">jquery</a> </li>
<li id="li_3" onmouseover="show(3)" onmouseout="hide(3)"><a href="http://www.wufangbo.com/category/yhty/">ued</a> 
	<dl id="dl_3">
    	<dd><a href="#">老凡CSS</dd>
        <dd><a href="#">中凡CSS</dd>
        <dd><a href="#">小凡CSS</dd>
    </dl>
</li>
<li><a href="http://www.wufangbo.com/category/linux/">linux</a> </li>
<li><a href="http://www.wufangbo.com/category/wordpress/">wordpress</a> </li>

</ul>
function show(i)
	{
		document.getElementById('dl_'+i).style.display='block';
		
	}
	function hide(i)
	{
		document.getElementById('dl_'+i).style.display='none';
	}
jquery的原生代码
$("document").ready(function(){
		$(".nav li").hover(function(){
						$(this).find('dl').show();			
								},function(){
			             $(this).find('dl').hide();
		                                     })
	      $(".nav li").mouseover(function(){
							 $(this).find('dl').fadeIn('slow');			  
										  })
		  
		  $(".nav li").mouseout(function(){
							 $(this).find('dl').hide();			  
										  })								  
	   })