jquery实战 横向纵向菜单
1.菜单项最外层是ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套。
2.list-style:none可以清除ul和li前面的小圆点。
3.清除子菜单的缩进值，需要ul的margin和padding值都为0.
4.如果背景图比实际元素的大小要小，默认会在横向和纵向上重复显示，直到填满整个区域，这时需要用background-repeat来控制。
5.同一个元素上同时定义了背景图和背景色，那么有背景图的地方就会覆盖背景色。
6.text-decoration：none取消文字的下划线。
7.background-postion控制背景图的显示位置。
8.background-image设置为none就没有背景图了（有时继承父元素带来了背景图。）
9.display: block;让a元素充满所在区域。 ，none：隐藏 。
display: inline-block; width: 120px;这是针对ie6的设置。
10. .main a和.main > a的不同：前者选择.main这个class内的所有a节点，后者只选择.main的子节点中的a节点。
11.show()和hide()无参数时和CSS离得display属性效果一样。可以设置的参数为：毫秒数或者fast，normal，slow。有动画效果。
12.toggle()可以直接让显示的隐藏，隐藏的显示，省的我们去判断，参数同show()方法。
13.slideDown()和slideUp()可以实现向下或者向上卷动的效果。注意slideToogle()。
14.float值为left时可以让各自位于一行的元素现在在同一行向左浮动显示。
15.可以给多个选择器定义同样的样式，用“,”分隔，$()方法也可以传入多个选择器。
16.交互处理：a.hover(over,out)鼠标移过去执行自定义的over方法，移出这个对象执行第二 个out函数。
b.toggle(fn,fn)每次点击时切换要调用的函数。
HTML代码：
CSS代码：
JS代码：
2.list-style:none可以清除ul和li前面的小圆点。
3.清除子菜单的缩进值，需要ul的margin和padding值都为0.
4.如果背景图比实际元素的大小要小，默认会在横向和纵向上重复显示，直到填满整个区域，这时需要用background-repeat来控制。
5.同一个元素上同时定义了背景图和背景色，那么有背景图的地方就会覆盖背景色。
6.text-decoration：none取消文字的下划线。
7.background-postion控制背景图的显示位置。
8.background-image设置为none就没有背景图了（有时继承父元素带来了背景图。）
9.display: block;让a元素充满所在区域。 ，none：隐藏 。
display: inline-block; width: 120px;这是针对ie6的设置。
10. .main a和.main > a的不同：前者选择.main这个class内的所有a节点，后者只选择.main的子节点中的a节点。
11.show()和hide()无参数时和CSS离得display属性效果一样。可以设置的参数为：毫秒数或者fast，normal，slow。有动画效果。
12.toggle()可以直接让显示的隐藏，隐藏的显示，省的我们去判断，参数同show()方法。
13.slideDown()和slideUp()可以实现向下或者向上卷动的效果。注意slideToogle()。
14.float值为left时可以让各自位于一行的元素现在在同一行向左浮动显示。
15.可以给多个选择器定义同样的样式，用“,”分隔，$()方法也可以传入多个选择器。
16.交互处理：a.hover(over,out)鼠标移过去执行自定义的over方法，移出这个对象执行第二 个out函数。
b.toggle(fn,fn)每次点击时切换要调用的函数。
HTML代码：
<!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 runat="server">
<title>jQuery实战-下拉菜单</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="jsLib/jquery.js" type="text/javascript"></script>
<script src="jsLib/menu.js" type="text/javascript"></script>
</head>
<body>
<h4>纵向菜单</h4>
<ul>
<li class="main">
<a href="#" class="first">菜单一</a>
<ul>
<li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>
<li class="main">
<a href="#" class="first">菜单二</a>
<ul>
<li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="main">
<a href="#" class="first">菜单三</a>
<ul>
<li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<h4>横向菜单</h4>
<ul>
<li class="hmain"><a href="#" class="first">菜单一</a>
<ul>
<li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>
<li class="hmain"><a href="#" class="first">菜单二</a>
<ul>
<li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="hmain"><a href="#" class="first">菜单三</a>
<ul>
<li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS代码：
a:link, a:visited { /* 设置默认及访问过的超链接样式 */
text-decoration: none;
text-align: center;
color: #000;
display: block;
display: inline-block;
width: 120px;
height: 20px;
line-height: 20px;
}
ul { /* 设置UL样式，去掉小圆点，让二级菜单与一级菜单之间没有缩进 */
list-style: none;
}
.main {
margin-bottom: 1px;
}
.main, hmain { /* 菜单的样式 */
width: 120px;
}
.main a.first, .hmain a.first{ /* 设置一级菜单的样式 */
background-color: #000;
color: #fff;
}
.main ul , .hmain ul{ /* 设置二级菜单的样式 */
background-color: #eee;
display: none;
width: 120px;
}
.main li, .hmain li{
padding: 3px;
}
.hmain {
float: left;
margin-right: 1px;
}
JS代码：
$(function() {
// 针对纵向菜单，只要点击后显示或隐藏即可
$(".main > a").click(function() {
var ulNode = $(this).next("ul");
ulNode.slideToggle("slow");
});
// 针对横向菜单，需要在鼠标移上时显示，移除时隐藏
$(".hmain").hover(function() {
var ulNode = $(this).children("ul")
timeoutid = setTimeout(function(){
ulNode.slideDown("slow");
},300);
}, function() {
$(this).children("ul").slideUp("slow");
clearTimeout(timeoutid);
});
});