纯CSS下拉菜单

Question

我一直在研究Facebook应用程序，您知道在Facebook上不允许使用本机javascript，它们有自己的实现FBJS，在创建菜单之类的内容时会遇到麻烦。

是否有没有JavaScript参与的纯CSS下拉解决方案 （我见过的所有解决IE6的解决方案都使用javascript）？

Answer 1

是的，有很多方法。 看看Listamatic 。

您可以采用简单的列表并使用不同的层叠样式表来创建根本不同的列表选项吗？ Listamatic展示了将CSS应用于一个简单列表时的功能。

垂直菜单和水平菜单都使用纯CSS。

一些工作示例：

1. http://www.xs4all.nl/~peterned/examples/cssmenu.html
2. http://www.tjkdesign.com/articles/dropdown/demo.asp

实际上，您可以用几行实现一个基本列表：

li ul { display: none; } 
li:hover > ul { display: block; }

请注意，如果您支持IE6，则需要JavaScript（因为它不适用于li：hover）。

Answer 2

Google最近开始逐步淘汰IE6支持，并通知其应用程序供域客户升级其用户。 除非您服务的市场或客户群是已知正在使用IE6并且无法或不愿升级的产品，否则我将忽略它并使用：hover解决方案（不使用JavaScript）。