CSS实现下啦菜单，不允许用JS

http://bbs.blueidea.com/thread-2943760-1-1.html

SS中模拟这样的效果核心就是利用:hover伪类设置悬停样式。我想说说我觉得不是很好的地方：1.模拟的效果只能是鼠标悬停。 比如模拟下拉菜单，需要的事件是click而不是mouseover。 更复杂的情况，还有鼠标滑过停留xxx毫秒显示下拉菜单，不到xxx毫秒则不会自动显示下拉菜单。 鼠标单击 显示/隐藏下拉菜单。 在下拉菜单外任意位置单击则隐藏下拉菜单，选择下拉菜单中任意项，改变下拉菜单显示，同时隐藏下拉菜单。 等等。 以上各种情况都不是使用简单的CSS就可以模拟的。使用js可以获得更好的用户体验吧（套话套话了）。 当然，也要注意脚本禁用的情况，可能会导致辛苦模拟出来的效果完全不可用。 总之下拉菜单模拟是很复杂和无法预料的。慎用慎用。2.标签切换的CSS模拟。 也是同样的情况，能用的只有:hover伪类。3.标签的语义。 用

来写级联菜单，我是觉得不符合语义的，文档结构中也不能表现出各级菜单的层级关系。 标签的模拟结构的话，我想也很难写出符合标签语义的文档结构吧。不用js实现tab切换

纯CSS下拉菜单也有好处，执行效率高，无需考虑客户端是否禁用了JS，定制样式也方便。问题是纯CSS的下拉菜单要支持各种浏览器，得写得好才行。IE6只支持a标签的hover伪类，并不支持li:hover这种，所以用条件注释把下拉菜单写进 标签中。就成这样了：XHTML代码改写成:

一级菜单

二级菜单

二级菜单

二级菜单

CSS代码改写成：dd{display:none;}dl:hover dd,a:hover dd{display:block;}但IE6有:hover伪类在IE6中的BUG。可以给a:hover 加 border:0来解决，所以你代码里有a:hover{border:0;}这一句，再次改写成：dd{display:none;}dl:hover dd,a:hover dd{display:block;}a:hover{border:0;}此时在IE6中鼠标移动到上面下拉菜单OK了。但给每个菜单加上连接的时候，IE6里又不行了，为什么？不知道。会不会是如果不放在table中的话，浏览器在解析html代码的时候，会提前解析a标签呢？不确定。可能因为table的解析方式是里面内容解析完成后再显示的，反正不管什么原因，再给IE条件注释里的 a 标签里再套上一个表格，即XHTML代码改写成如下就OK了：

这就是为什么最后弄了个这么一句话：的原因。