很有意思的两个菜单，第一个手动点击实现张开与关闭，第二个快速滑来滑去，菜单也跟着滑来滑去

HTML代码：

   

   
• 
       
          菜单1
       
  • 菜单11
  
       
  • 菜单12
  
   
  
  

     

• 
           菜单2
       
  • 菜单21
  
       
  • 菜单22
  
   
  
  


• 
          菜单3
       
  • 菜单31
  
       
  • 菜单32
  
   
  
  

   
• 
       
          菜单1
       
  • 菜单11
  
       
  • 菜单12
  
   
  
  

     

• 
           菜单2
       
  • 菜单21
  
       
  • 菜单22
  
   
  
  


• 
          菜单3
       
  • 菜单31
  
       
  • 菜单32
  
   
  
  

CSS代码：

ul,li{
   list-style:none;
   padding:0px;
   margin:0px;
   width:100px;
  
}
.main,.hmain{
      margin-left:5px;
 
}
.main,.hmain{
        background-image:url("images1/button-border.gif");
background-repeat:repeat-x;
font-size:20px;

}
.main ul{
       background-color:#efefef;
  
  display:none;
}
.hmain ul{
       background-color:#efefef;
  display:none;
  
}
.main  li,.hmain li{
       margin-top:1px;
       font-size:15px;
  padding:2px;
}
 a{
  text-decoration:none;
}
.main a,.hmain a{
        color:white;
margin:2px;


}
.main li a,.hmain li a{color:black;
          background-image:none;
}
.icon{
      background-image:url("images/002.png");
background-repeat:no-repeat;
}
.hmain{
     float:left;
}

JS代码：

$(function(){

//第一个菜单点击事件
 $(".main").click(function(){
     $(this).children("ul").slideToggle();
var Li=$(this).siblings("li");
 
  $(Li).children("ul").slideUp();
  if($(this).children(".icon").css("background-image").indexOf("002.png")>0){
      
  if($(Li).children(".icon").css("background-image")!=$(this).children(".icon").css("background-image")){
        $(this).children(".icon").css("background-image","url('css/images/004.png')");
       $(Li).children(".icon").css("background-image","url('css/images/004.png')");

  }else{$(this).children(".icon").css("background-image","url('css/images/004.png')");
        $(Li).children(".icon").css("background-image","url('css/images/002.png')");
 
  }
  
  }else{
         
if($(Li).children(".icon").css("background-image")!=$(this).children(".icon").css("background-image")){
$(this).children(".icon").css("background-image","url('css/images/002.png')");
       $(Li).children(".icon").css("background-image","url('css/images/002.png')");

  }else{$(this).children(".icon").css("background-image","url('css/images/002.png')");
  }
        $(Li).children(".icon").css("background-image","url('css/images/004.png')");
 
 
  }
 });

//第二个菜单用hover实现
$(".hmain").hover(function(){
     
    $(this).children("ul").slideDown()
 },function(){
   
     $(this).children("ul").slideUp();
 });
 $(".hmain ul li").click(function(){
    alert("click");
 })
})