jQuery+CSS制作下拉菜单
看这篇文章之前请先看看效果：demo。
从有图形操作系统开始，下拉菜单和菜单栏就占据一个重要地位。到现在，它们的使用已经无处不在。甚至桌面应用程序和网页设计也在跟随这种潮流。本文旨在简单睇讲解如何在你的网页中利用jQuery和CSS技术加入强大的下拉菜单。
入门
首先，我们需要确定基本菜单级数，为了保持语法结构，我们将使用无序列表（ul）链接标准。我们将使用下面的代码作为一个例子。
<ul id="cssdropdown"> <li class="headlink"> <a href="http://digan.cn">Search Engines</a> <ul> <li><a href="http://digan.cn">Google</a></li> <li><a href="http://digan.cn/">Yahoo</a></li> <li><a href="http://digan.cn/">Live Search</a></li> </ul> </li> <li class="headlink"> <a href="http://digan.cn">Shopping</a> <ul> <li><a href="http://digan.cn/">Amazon</a></li> <li><a href="http://digan.cn/">eBay</a></li> <li><a href="http://digan.cn/">CraigsList</a></li> </ul> </li> </ul>
效果如下：
创建下拉列表
把HTML语句和链接结构写好以后，我们可以在css中添加一些基本属性，提示：hover属性表示鼠标悬停在相应项目上是的样式。
我们可以通过css来清楚无序列表（ul）的默认样式。并设置列表项目在鼠标滑过是的样式。例如：
li.headlink ul { display: none; } li.headlink:hover ul { display: block; }
最好在这个时候为菜单列表设置一些基本的样式，例如：对齐属性和宽度等，以确保菜单在显示和隐藏的时候不会变形。
完成这一步以后，我的效果如下：
解决兼容性问题
很遗憾，IE对hover属性支持得并不太好，在这一点上，一段精短的JavaScript就可以解决这个问题。我们需要做的是为ul标签里所有class=headlink的项目加上onmouseover和onmouseout事件，这个问题可以用一下js脚本解决：
window.onload = function() { var lis = document.getElementsByTagName('li'); for(i = 0; i < lis.length; i++) { var li = lis[i]; if (li.className == 'headlink') { li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; } li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; } } } }
使用jQuery库的朋友则有一个更加简单的办法，使用下面的语句：
$(document).ready(function(){ $('li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); });
完成这一步后，你可以看到如下效果：
整理代码
现在，这个下拉菜单已经可以在大多数主流浏览器上正常运行，接下来要做的就是美化，整理代码，上线。
使用无需列表比标准列表更有利于设置基本样式，就是因为这一点，我们能更容易地设计出自己喜欢的菜单样式。
后期润色
设置一些符合网站风格的样式，并添加一些更加帅的特效。
如果在美化一下，那就牛了！
jQuery现在好多网站都在用……包括我的RSS订阅就是这个做的。
此方法收藏，等有时间再研究：）
jQuery可要好好学啊。
很棒，不过你的DEMO不太容易找，个人比较习惯看完代码介绍后再点文章末尾的DEOM链接。
@LAONB
我的demo这样放是别有所图的嘛
呵呵，下拉菜单，我喜欢