导航和菜单的教程一
jQuery制作多级导航菜单(说的很详细) http://www.w3cplus.com/jquery/how-to-build-and-enhance-more-level-navigation-menu
先了解css选择器：http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
注意：多元素的组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E:hover 匹配鼠标悬停其上的E元素
目标
这个导航有一个最大的特点：在现代浏览器中无需任何脚本也支持下拉菜单的功能。
第一步：HTML Markup
首先我们需要一个正常而又清晰的导航菜单结构，一般我们都是这样写的：
第二步：CSS Code
上面我们完成了基本结构，接下来我们要使用样式来美化他，不过这里和平时美化稍有不同，因为还需要考虑到使用样式控制下拉菜单的显示与隐藏功能。别的不说，我们直接上代码才一关键：
1、顶级导航样式
上面主要修饰的是顶级导航的样式，接下来看第二步。
2、二级菜单样式
这里有一个关键地方：菜单加载进页面时，所有子级菜单项都是被隐藏,
然后我们利用的是CSS的”:hover”来实现，当鼠标次级导航的父元素上时，他才被显示，当鼠标离开时又被隐藏：
只是在IE6的浏览器中并不支持“li:hover”功能（具体解决办法可以参考《浏览器兼容之旅的第四站:IE常见Bug——part2》）http://www.w3cplus.com/ten-most-common-ie-bugs-and-how-to-fix-them-part-2，以致于我们使用纯CSS制作下拉导航存在一个隐患，但对于弃用了IE6的朋友，那是没有问题的。
另外我们这里使用的三角标志也是纯CSS的制作，如上图所示，具体实现方法：我们采用元素的0宽度和高度，并使用元素的border属性来制作，请看三角实现的代码：
如果对这种制作方法感兴趣的，可以点击Matt写的《How to Create DIV Shapes Like Triangles and Circles》http://blog.mattforhire.ca/2011/08/10/how-to-create-div-shapes-like-triangles-and-circles/。
3、三级（或更深层级）样式
前面两步都是一级二级菜单样式，其实三级菜单或者说四级菜单，他们的基本样式都和前面的一样，只不过是一个位置的不同而以二级菜单通常都是在一级导航的下面，而三级菜单通常是在二级的右边，四级就是三级的右边，依些类推放置。下面我们来看其代码：
这里的left和top很特别，使得left之上级的后面，并与最后一个li的top同样水平．为什么使用li:hover？E:hover 匹配鼠标悬停其上的E元素．
此处也是利用“li:hover”来控制下拉菜单的显示和隐藏功能。
其实到此为此，我们这个多级菜单导航功能在现代浏览器中就可以正常运行了，但由于在”IE6″下不支持“li:hover”致使无法正常运行，而IE6相对来说还是蛮多人在使用，那么为了让其达到一样的效果，我们就接着使用jQuery，让这个多级导航菜单在各浏览器中都能运行。
第三步：jQuery Code
前面也说了，达到前面DEMO展示的效果，在现代浏览器中到上面一步就算功德圆满了，可是还有一个IE6，我们只好使用JQuery方法来辅助完成，首先在第一步将jQuery版本库导进来：
<script type=”text/javascript” src=”../js/jquery.min.js”></script>
下面接着看实现功能的jQuery代码
1、jQuery实现的方法一：
2、jQuery实现的方法二：
这里我们主要使用了jQuery中的.hover()方法来控制子菜单的显示与否，当然我们带可以使用.mouseover()和.mouseout()方法来代替.hover()方法；而且这里还使用了.slideDown()方法，让动更显示更生动，当然大家还可以配合jquery.effects.core.js使用。具体效果，大家可以点击Demo，此例中和Demo稍有不同，感兴趣的可以查看代码，或直接将本例代码Copy到你本地，就能正常运行。
到此，一个生动而轻便的多级导航就完成了。在这个实例中，我们一起见证了两点：其一，在现代浏览器中使用纯CSS也一样能制作出靓丽好看的多级导航；其二，不使用任何jQuery插件，也能制作兼容性强，外观好看的多级导航菜单。如果你不在需要兼容IE6,你完全可以使用纯CSS来制作多级菜单。不知道你有没有心动，有心动就动手吧，自力更生，才能丰衣足食。
2011-09-29更新
如需转载烦请注明出处：W3CPLUShttp://www.w3cplus.com/
