如何引用jQuery实现下拉列表，点击展开，点击关闭。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {    
      position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
      left: auto;      
      top: auto;     
      bottom:auto;      
      width: 237px;      
      height:auto;     
      z-index: 2;    
      margin-top:-8px;     
      margin-left:40px;     
      text-align:center;     
      font-size:16px;     
      font-family:"黑体";     
      color:#965D28;     
      background-image:url(../img/bg.png);     
} 
#menu{     
    display:none; 
}
.daohang div{     
    height: 30px;     
    z-index: 2;    
    margin:0 auto;     
    text-align:center;     
    padding-top:5px;     
    overflow:hidden;    
    padding-top:10px;     
    color:965D28; 
} 
.daohang div:hover{    
    height:30px;     
    z-index:2;     
    margin:0 auto;     
    background-image:url(../img/menu-hover.png);    
    text-align:center;    
    overflow:visible;     
    color:#fff; 
}
.daohang li{    
    margin-left:237px;     
    list-style-type:none;    
    background-color:#D3A23A;     
    width:160px;     
    line-height:30px;     
    color:#422B1D;     
    position:relative;     
    top:-40px;    
    background-image:url(../img/bg.jpg);     
    border:solid thin;     
    border-color:#965D28;     
    z-index:1;    
}
.daohang li:hover{     
    margin-left:237px;     
    list-style-type:none;    
    background-color:#D3A23A;    
    width:160px;    
    line-height:50px;     
    color:#fff;    
    position:relative;    
    top:-40px;    
    border:solid thin;     
    border-color:#965D28;     
    background-image:url(../img/bg.png);     
    z-index:1;    
}
.daohang a:link,a:visited{    
    text-decoration:none;     
    color:#965D28; }
.daohang a:hover{     
    text-decoration:none;     
    color:#fff; 
}

</style>



</head>

<body>
<script> 　　
function menuvisible() 
{ 　　
    $("nav").slideToggle(1500);/*开关*/　　
}    
</script>

<div id="apDiv1" >
<img src="" width="90" />   
<nav id="menu">  
<div class="daohang" style=" background-color:#630">       
<a href="index.html">
<div style=" background-color:#FC0; color:#fff">首页
</div>
</a>       
<a href="about us.html" target="_blank"><div>关于我们
</div>
</a>       
      
<a href="services.html" target="_blank"><div>咖啡文化
</div></a>      
<a href="price list.html" target="_blank"><div>价格清单
</div>
</a>     
<a href="contact.html" target="_blank"><div>联系我们
</div></a> 
</div>   
</nav>  
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">  
<input style="color:#fff; border:none; 100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
</div> 
<div style="background-image:url(img/bg.png)"><a href="#"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
</a>
</div> 
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡

</body>
</html>
——————————————————————————————————————————