版权声明：可以任意转载，但转载时必须标明原作者charlee、
许多网站都使用了下拉菜单效果，但大部分都是用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》中应用了这种方法来制作下拉菜单，有兴趣的可以参考。