一.按照惯例，先上DOM结构
二.有了DOM结构，再确定样式
#menu{
font-family:Helvetica;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
width:250px;
}
#menu ul li{
margin:1px 0px;
padding:0px;
}
#menu ul li a{
height:30px;
line-height:30px;
padding-left:10px;
display:block;
text-decoration:none;
font-weight:bold;
color:#333;
font-size:16px;
border:1px solid #ccc;
}
#menu ul li a:Hover{
background:#a0b4dc;
}
#menu ul li li a{
border:none;
height:25px;
line-height:25px;
}
#menu ul li li a:hover{
background:yellow;
}
#menu ul li ul{
display:none;
}
三.然后就是最重要的JQUERY部分了
(function($){
$.fn.slideMenu=function(){
return this.each(function(){
var menu=$(this);
menu.find("ul li>a").bind("click",function(event){
var currentLink=$(event.currentTarget);
if(currentLink.parent().find("ul.active").size()==1){ //如果被点击的连接的子菜单已经显示了，就隐藏该子菜单
hide(currentLink);
}
else if(menu.find("ul li ul.active").size()==0){ //如果所有的子菜单都没有显示，则显示点击的子菜单
show(currentLink);
}
else{ //显示点击的子菜单，隐藏已显示的子菜单
menu.find("ul li ul.active").slideUp("medium",function(){
menu.find("ul li ul").removeClass("active");
show(currentLink);
});
}
});
var show=function(currentLink){ //显示子菜单方法
currentLink.parent().find("ul").addClass("active");
currentLink.parent().find("ul").slideDow