版权声明：可以任意转载，但转载时必须标明原作者charlee、原始链接http://tech.idv2.com/2007/08/16/make-dropdown-menu-with-css/以及本声明。
许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。
不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。
请看下面的代码。
<html> <head> <style> </style> </head> <body> <div id="menu"> <h3>Select from menu</h3> <ul> <li>menu item 1</li> <li>menu item 2</li> <li>menu item 3</li> <li>menu item 4</li> <li>menu item 5</li> </ul> </div> </html>
我们尚未定义样式表，这个页面显示结果就是一个简单的列表。
为了实现下拉菜单，我们先将<ul>元素隐藏起来：
#menu ul { display: none; }
然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：
#menu:hover ul { display: block; }
OK，这样一个简单的下拉菜单就做好了。最后的代码如下（对菜单样式作了些修饰）：
<html> <head> <style> #menu { font-size: 0.8em; width: 150px; cursor: pointer; } #menu ul { border: solid 3px #F44; background-color: #FCC; display: none; } #menu:hover ul { padding: 5px; display: block; list-style-type: none; } #menu ul li:hover { text-decoration: underline; } </style> </head> <body> <div id="menu"> <h3>Select from menu</h3> <ul> <li>menu item 1</li> <li>menu item 2</li> <li>menu item 3</li> <li>menu item 4</li> <li>menu item 5</li> </ul> </div> </html>
实现的效果如下所示：
在CSS Zen Garden的一个设计《Tulipe》中应用了这种方法来制作下拉菜单，有兴趣的可以参考。
看完这篇文章后感觉怎样？如果还需要更多的内容，可以看看下面这些，也许会对你有帮助：
2007-08-22 16:15
css 菜单是又一个看来很 cool 的 hack
实际用 css 做这种效果可不是 w3 的初衷
个人还是认为应该用 javascript 或其它技术代替，否则互联网可要从满是 table 的坑跳进一个新的满是 css hack 的坑了
2007-08-22 17:54
To emlvvh:
谢谢你的评论。你的担忧不无道理。
至少针对这个话题来说，菜单的的确确应该使用Javascript来做。
实际上和smalldust讨论的是同一个问题：
* 在标准未完善之前，我们是否应当利用某些技巧来达到目的？
我暂时还想不到这个问题的答案，希望各位能发表高见。
2007-12-28 02:39
为什么你们整天都在讨论W3的初衷，什么Web的标准啊？
没件事都有它自己的发展，包括技术！为什么一定困在它的所谓标准的框框里做事呢？
CSS Hack的出现我觉得时技术的进步！而CSS Hack根本就不是W3标准的未完善，而是各浏览器支持的不同而产生出来的产物！
当几年后我们很好的用DIV+CSS布局又怎样？说不定不知哪天W3又说这不是他们想要的！
其实技术的发展就需要又突破，平庸的在它框框里生存将就的才不是W3想要的！
2007-12-28 13:17
@Moolee 的确你说的有道理。
事实上，不遵循标准会导致厂商之间的产品的不兼容，给开发者带来很大的不便，往大里说就是浪费人类的生命。但各个厂商为了自己的商业利益着想，总会或多或少地做一些不兼容标准的东西。而这些不兼容的内容，也许就是下一个标准的基础。
2008-06-20 09:27
作为网页设计师，Web标准是我们的方向。我现在担心的是，Web标准的将来会不会又是一堆泡沫。在那时，作为网页设计师的我们，下一个方向又是什么？
647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
