可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单，放到ie6上一测试竟然奇葩般的会瞎闪。问题原因至今没参透，可能是我每次响应事件的处理代码过长？？总之我是对ie6幻灭了，去网上搜一搜能支持ie6的下拉菜单的实现，发现了这个网站的实现：
http://www.jb51.net/article/12964.htm（请猛点我）
实现得相当漂亮，没有用一行js代码，其主要思想是将二级菜单嵌入到上一级菜单项的dom对象中，并使用上一级菜单项的hover伪类来控制二级菜单的visibility属性。唯一美中不足的是这个实现只是一个二级菜单，我需要做一个三级的。试了一下与原实现类似的写法：
ul li:hover ul { visibility: visible }
但这样会有歧义，它区分不出是哪一级菜单项被悬停时应该显示其下面的哪一级菜单。于是冥思苦想怎么解决菜单定位歧义的问题，解决方案是，对每一级菜单都指定不同的class名称，这样可以直接定位到某一级菜单，不会产生歧义。html代码大体如下：
<ul class="l1-nav"> <!-- 第一级菜单 --> <li class="l1-nav"> <!-- 第一级菜单项 --> <ul class="l2-nav"> <!-- 第二级菜单 --> <li class="l2-nav"> <!-- 第二级菜单项 --> <ul class="l3-nav"> <!-- 第三级菜单 --> <li class="l3-nav"></li> <!-- 第三级菜单项 --> </ul> </li> </ul> </li>
</ul>
而控制显示隐藏的代码如下：
li.l1-nav:hover ul.l2-nav, li.l2-nav:hover ul.l3-nav
{ visibility: visible }
不过对于ie6这个不听话的顽劣之徒来说，如果真的这么简单就太天真了。由于ie6只有a元素支持hover伪类，所以在ie中还要在li里包一个a元素。好在ie6中支持a元素里面包含其他元素，而不像其他浏览器里a元素不能包含其他元素（ie6奇葩之处不能胜数）。这样写出来的代码就有一些绕。而且还有一个针对ie6的hack是必须把每一个li项包含在一个定位为relative的table中，至于为什么由于没有删除一点点测还不得知，据猜测可能跟浮动定位有关。闲话不多说，上代码吧，css还是很简洁的，html就又臭又长还不好理解，谁让咱要考虑兼容性呢：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE--> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定义名字空间--> <head> <title>网页布局+纯CSS三级鼠标悬停显示/隐藏菜单</title><!--标题栏--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定义语言编码--> <meta http-equiv="Content-Language" content="gb2312" /><!--针对老版浏览器定义语言编码--> <meta content="all" name="robots" /><!--允许搜索机器人--> <meta name="author" content="" /><!--作者信息--> <meta name="Copyright" content=",共同探讨,允许转载" /><!--版权信息--> <meta name="description" content="下拉菜单,CSS,布局" /><!--简介--> <meta content="下拉,菜单,CSS,布局" name="keywords" /><!--关键词--> <style type=text/css> * { margin: 0; padding: 0; border: 0; } html { background: #bfc4c7; /*背景颜色*/ } body { font: 12px/150% '宋体'; margin: 0 auto; width: 770px; text-align: center; } /*menu部分*/ #menu { margin: 0 auto; width: 770px !important; clear: both } #menu ul { list-style: none; } #menu table { position: absolute; left: 0; top: 0; } li.l1-nav { float: left; position: relative; left: 0px; top: 0px; } a.l1-nav { display: block; text-align: center; text-decoration: none; width: 77px; height: 30px; line-height: 30px; color: #000; background: #c9c9a7; } li.l1-nav:hover a.l1-nav, a.l1-nav:hover { color: #fff; background: #b3ab79; } ul.l2-nav { visibility: hidden; position: absolute; /* 第二级菜单相对于第一级菜单绝对定位 */ left: 0px; top: 30px; } li.l2-nav { float: left; position: relative; /* 这里把第二级菜单项设成相对定位，以使得它包含的三级菜单相对它自己定位 */ left: 0px; top: 0px; } a.l2-nav { display: block; /* 把a设成块级显示 */ text-align: center; text-decoration: none; width: 77px; height: 30px; line-height: 30px; color: #000; background: #faeec7; } li.l2-nav:hover a.l2-nav, a.l2-nav:hover { color: #fff; background: #dfc184; } ul.l3-nav { visibility: hidden; position: absolute; left: 77px; top: 0px; } /* 这是控制菜单显示与隐藏的重点 */ a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav, a.l2-nav:hover ul.l3-nav, li.l2-nav:hover ul.l3-nav { visibility: visible; } a.l3-nav { display: block; width: 77px; height: 30px; line-height: 30px; background: red; color: #000; text-decoration: none; } a.l3-nav:hover { background: blue; color: #000; } </style> </head> <body> <div id="menu"> <ul class="l1-nav"> <li class="l1-nav"> <!-- IE6里面a元素可以包含其他元素，且只有a能够支持hover伪类，但ul还要放在一个table中。而chrome中，a不可以包含其他元素，但li支持hover伪类。所以这一段有些绕。 --> <a class="l1-nav" href="">第一分类 <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l2-nav"> <li class="l2-nav"> <a class="l2-nav" href="">XHTML <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">XHTML1</a></li> <li><a class="l3-nav" href="">XHTML2</a></li> <li><a class="l3-nav" href="">XHTML3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">CSS <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">CSS1</a></li> <li><a class="l3-nav" href="">CSS2</a></li> <li><a class="l3-nav" href="">CSS3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">PHP <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">PHP1</a></li> <li><a class="l3-nav" href="">PHP2</a></li> <li><a class="l3-nav" href="">PHP3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">MySQL <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">MySQL1</a></li> <li><a class="l3-nav" href="">MySQL2</a></li> <li><a class="l3-nav" href="">MySQL3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Fireworks <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Fireworks1</a></li> <li><a class="l3-nav" href="">Fireworks2</a></li> <li><a class="l3-nav" href="">Fireworks3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Photoshop <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Photoshop1</a></li> <li><a class="l3-nav" href="">Photoshop2</a></li> <li><a class="l3-nav" href="">Photoshop3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Flash <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Flash1</a></li> <li><a class="l3-nav" href="">Flash2</a></li> <li><a class="l3-nav" href="">Flash3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l1-nav"> <a class="l1-nav" href="">第一分类 <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l2-nav"> <li class="l2-nav"> <a class="l2-nav" href="">XHTML <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">XHTML1</a></li> <li><a class="l3-nav" href="">XHTML2</a></li> <li><a class="l3-nav" href="">XHTML3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">CSS <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">CSS1</a></li> <li><a class="l3-nav" href="">CSS2</a></li> <li><a class="l3-nav" href="">CSS3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">PHP <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">PHP1</a></li> <li><a class="l3-nav" href="">PHP2</a></li> <li><a class="l3-nav" href="">PHP3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">MySQL <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">MySQL1</a></li> <li><a class="l3-nav" href="">MySQL2</a></li> <li><a class="l3-nav" href="">MySQL3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Fireworks <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Fireworks1</a></li> <li><a class="l3-nav" href="">Fireworks2</a></li> <li><a class="l3-nav" href="">Fireworks3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Photoshop <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Photoshop1</a></li> <li><a class="l3-nav" href="">Photoshop2</a></li> <li><a class="l3-nav" href="">Photoshop3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> <li class="l2-nav"> <a class="l2-nav" href="">Flash <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul class="l3-nav"> <li><a class="l3-nav" href="">Flash1</a></li> <li><a class="l3-nav" href="">Flash2</a></li> <li><a class="l3-nav" href="">Flash3</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--> </li> </ul> </div> </body><!--网页主体结束--> </html>
实现效果如下：
经虚拟机xp下亲测，非常流畅，一点不闪。有任何不甚严谨之处还敬请指教！