jquery 菜单1

 

<style type="text/css">
dl, dt, dd, ul, li, a{
margin: 0; 
padding: 0;
}
a{
color: #292929;
}
li{
list-style-type: none;
padding-left: .2em;
}
dl{
width: 150px;
}
dt{
background-color: #FF6500;
}
</style>
<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="javascript" >
 $(function(){
  $("dd:not(:first)").hide();
  $("dt a").click(function(){
    $("dd").slideUp();
    $(this).parent("dt").next("dd").slideDown("normal");
  });
 })
</script>
<dl>           
 <dt><a href="#">Home</a></dt>          
 <dd>             
  <ul>               
   <li><a href="#">Link 1</a></li>   
   <li><a href="#">Link 2</a></li>  
   <li><a href="#">Link 3</a></li>   
  </ul>  
 </dd>   
 
 <dt><a href="#">About</a></dt>     
 <dd>      
  <ul>      
   <li><a href="#">Link 1</a></li>    
   <li><a href="#">Link 1</a></li>    
   <li><a href="#">Link 1</a></li>    
  </ul>
 </dd>         

 <dt><a href="#">Blog</a></dt>  
 <dd>          
  <ul>          
   <li><a href="#">Link 1</a></li>   
   <li><a href="#">Link 1</a></li>    
   <li><a href="#">Link 1</a></li>       
  </ul>
 </dd>    
 
 <dt><a href="#">Contact</a></dt>  
 <dd>          
  <ul>     
   <li><a href="#">Link 1</a></li> 
   <li><a href="#">Link 1</a></li>   
   <li><a href="#">Link 1</a></li>   
  </ul>        
 </dd>     
</dl>

 

<br><br>
<pre>
代码： 

$("dd:not(:first)").hide();
    $("dt a").click(function(){
 $("dd").slideUp();
 $(this).parent("dt").next("dd").slideDown("normal");
});
</pre>