jQuery做的横向菜单和竖向的菜单

以前自己做了菜单结构，在做网页开发的时候经常会用到，所以收藏一下，对自己有用
html页面：
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul >
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul >
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项42</a></li>
</ul>
</li>

</ul>
<br/>
<br/>
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul >
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul >
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项42</a></li>
</ul>
</li>

</ul>
jQuery代码：

$(document).ready(function(){
//页面中的dom装载完成后执行
$(".main > a").click(function(){
//alert("fd");
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
//一种方法
/*if(ulNode.css("display")=="none"){
  ulNode.css("display","block");
}else{
ulNode.css("display","none");
}*/
//一种方法
//ulNode.show("fast");//slow normal fast显示
//ulNode.hide();//隐藏
//一种方法
//ulNode.toggle();//自动的判断数据的存在或不存在，然后显示，隐藏
        //一种方法
//ulNode.slideDown();//也可以加参数slow normal fast
        //ulNode.sildeUp();
//最好的方式
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/**
* 修改主菜单的指示图标
*
*/
function changeIcon(mainNode){
if(mainNode){
if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
mainNode.css("background-image","url(images/expanded.gif");
}else{
mainNode.css("background-image","url(images/collapsed.gif");
}
}

}

css处理：
ul,li{
  /*清除ul和li的小圆点*/
  list-style:none;
 
}
ul{
  /*清掉ul前面的空格*/
  padding:0;
  margin:0;
}

.main,.hmain{
  background-image:url(../images/title.gif);
  background-repeat:repeat-x;
  width:120px;
}
.main li,.hmain li{
   background-color:#eeeeee;
}
a{
   text-decoration:none;
   dispaly:inline-block;/*解决ie6的*/
   padding-left:20px;
   display:block;
   display:inline-block;
   width:100px;
   padding-top:3px;
   padding-buttom:3px;
  
}
.main a,.hmain a{
   color:#fff;
   background-image:url(../images/collapsed.gif);
   background-repeat:no-repeat;
   background-position:3px center;
  
}
.main li a,.hmain li a{
   color:black;
   background-image:none;
}
.main ul,.hmain ul{
  display:none;
}
.hmain{
  float:left;
  margin-right:1px;
}