原文是司徒正美大神的,两篇文章地址如下:
http://www.cnblogs.com/rubylouvre/archive/2009/09/27/1575220.html
http://www.cnblogs.com/rubylouvre/archive/2009/09/28/1575294.html
现在发布的内容，我稍作修改,如有谬误，请回上方两文地址拜读大神原作.
--------------------------------------------------------------------------------------
首先,我们用span作为子菜单进行测试探索.
Version 1
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 } 24 .menu a { 25 display:block; 26 position:relative; 27 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 28 width:100px; 29 background:#FF6600; 30 color:#6699FF; 31 text-decoration:none; 32 } 33 .menu a:hover { 34 background:#00CCCC; 35 color:#000000; 36 } 37 /*下拉菜单样式*/ 38 .menu li span { 39 display:none; 40 position:absolute; 41 left:0; 42 top:32px; 43 width:200px; 44 height:150px; 45 background:#FFCC99; 46 } 47 .menu a:hover span { 48 display:block; 49 } 50 51 </style> 52 53 <h1>纯CSS多级菜单 by 司徒正美</h1> 54 <div class="menu"> 55 <ul> 56 <li> 57 <a href="http://www.cnblogs.com/rubylouvre/"> 58 菜单一<span></span> 59 </a> 60 </li> 61 <li> 62 <a href="http://www.cnblogs.com/rubylouvre/"> 63 菜单二<span></span> 64 </a> 65 </li> 66 <li> 67 <a href="http://www.cnblogs.com/rubylouvre/"> 68 菜单三<span></span> 69 </a> 70 </li> 71 <li class="last"> 72 <a href="http://www.cnblogs.com/rubylouvre/"> 73 菜单四<span></span> 74 </a> 75 </li> 76 </ul> 77 </div> 78 </body> 79 </html>
经过测试后,发现IE6会出现子菜单不消失的情况
原因:
这是IE6特有的，就是子菜单在对应的包含块mouseout后仍不消失的问题。
hover伪类相当于moverover与moverout。我们在可以在mouseover给它的子孙元素认定一种样式，mouseout时认定另一种。
换言之，display现在在IE6无法切换（img元素除外）。
解决方法:
用visibility 代替display.
/*下拉菜单样式*/ .menu li span { /*display:none;*/ visibility:hidden; position:absolute; left:0; top:32px; width:200px; height:150px; background:#FFCC99; } .menu a:hover span { /* display:block;*/ visibility:visible; }
只需把原来的display注释掉，在下面各加一行visibility相关的CSS设置即可.
测试后，我们发现,IE6也可以了．
注意，这里的hover写到了a标签上，下拉菜单也只是用了一个简单的span,在这个状态下，我们鼠标放到二级菜单上时，它对应的一级菜单可以保持hover的样式.
-------------------------------------------------------------------------------------------------------------
在实际应用中，我们要使用<ul><li><a href=""></a></li></ul>作为子下拉菜单.所以，我们要对HTML结构进行改动.
把有关span的CSS全删掉，并在结构层原span的位置改为如下代码：
<ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul>
修改完成后，代码暂时如下:
<!doctype html> <head> <meta charset="gbk"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> <title>纯CSS相册 by 司徒正美</title> </head> <body> <style type="text/css"> * { margin:0; padding:0; font-size:12px; } .menu{ width:100%; height:32px; background:#FF6600; } .menu li { float:left; list-style:none; } .menu a { display:block; position:relative; height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ width:100px; background:#FF6600; color:#6699FF; text-decoration:none; } .menu a:hover { background:#00CCCC; color:#000000; } </style> <h1>纯CSS多级菜单 by 司徒正美</h1> <div class="menu"> <ul> <li> <a href="http://www.cnblogs.com/rubylouvre/"> 菜单一 <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> 菜单二 <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> </ul> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> 菜单三 <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul> </a> </li> <li class="last"> <a href="http://www.cnblogs.com/rubylouvre/"> 菜单四 <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul> </a> </li> </ul> </div> </body> </html>
这时，我们需要作一些改变：
HTML结构方面:
我们把二级菜单部分放到a标签之外li标签之内
CSS方面:
我们把相对定位部分从a迁移到li元素上
同时给子菜单添加样式
完成修改后，代码如下:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 } 36 .menu a:hover { 37 background:#00CCCC; 38 color:#000000; 39 } 40 /*下面是子下拉菜单部分*/ 41 .menu ul ul{ 42 visibility:hidden; /*初始为隐藏*/ 43 position:absolute; 44 left:0px; 45 top:32px; 46 } 47 48 .menu ul a:hover ul{ 49 visibility:visible; 50 } 51 52 .menu ul ul li{ 53 clear:both;/*清除li的浮动,保证垂直显示*/ 54 } 55 56 57 </style> 58 59 <h1>纯CSS多级菜单 by 司徒正美</h1> 60 <div class="menu"> 61 <ul> 62 <li> 63 <a href="http://www.cnblogs.com/rubylouvre/"> 64 菜单一 65 <ul> 66 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 67 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 68 </ul> 69 </a> 70 </li> 71 <li> 72 <a href="http://www.cnblogs.com/rubylouvre/"> 73 菜单二 74 <ul> 75 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 76 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 77 </ul> 78 </a> 79 </li> 80 <li> 81 <a href="http://www.cnblogs.com/rubylouvre/"> 82 菜单三 83 <ul> 84 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 85 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 86 </ul> 87 </a> 88 </li> 89 <li class="last"> 90 <a href="http://www.cnblogs.com/rubylouvre/"> 91 菜单四 92 <ul> 93 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 94 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 95 </ul> 96 </a> 97 </li> 98 </ul> 99 </div> 100 </body> 101 </html>
运行后，我们发现，完全失效。标准浏览器的所有元素都支持hover,而IE6只有带href的a标签才支持hover,那么，我们先把hover写到li上，先做到对标准浏览器的支持，IE6放到后面我们慢慢炮制它。
.menu ul a:hover ul{
visibility:visible;
}
改为:
.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
最终代码如下:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 } 36 .menu a:hover { 37 background:#00CCCC; 38 color:#000000; 39 } 40 /*下面是子下拉菜单部分*/ 41 .menu ul ul{ 42 visibility:hidden; /*初始为隐藏*/ 43 position:absolute; 44 left:0px; 45 top:32px; 46 } 47 48 .menu ul li:hover ul,/*非IE6*/ 49 .menu ul a:hover ul{/*IE6*/ 50 visibility:visible; 51 } 52 53 .menu ul ul li{ 54 clear:both;/*清除li的浮动,保证垂直显示*/ 55 } 56 57 58 </style> 59 60 <h1>纯CSS多级菜单 by 司徒正美</h1> 61 <div class="menu"> 62 <ul> 63 <li> 64 <a href="http://www.cnblogs.com/rubylouvre/"> 65 菜单一 66 <ul> 67 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 68 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 69 </ul> 70 </a> 71 </li> 72 <li> 73 <a href="http://www.cnblogs.com/rubylouvre/"> 74 菜单二 75 <ul> 76 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 77 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 78 </ul> 79 </a> 80 </li> 81 <li> 82 <a href="http://www.cnblogs.com/rubylouvre/"> 83 菜单三 84 <ul> 85 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 86 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 87 </ul> 88 </a> 89 </li> 90 <li class="last"> 91 <a href="http://www.cnblogs.com/rubylouvre/"> 92 菜单四 93 <ul> 94 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 95 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 96 </ul> 97 </a> 98 </li> 99 </ul> 100 </div> 101 </body> 102 </html>
运行后，我们可以发现，二级菜单能弹出来了，但那个神秘的li元素也现形了。司徒大神说他用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。
他说参考外国的代码，方法是，把整个子菜单放到a元素的外面，然后用li:hover控制样式的切换。于是结构层改写如下：
<div class="menu"> <ul> <li> <a href="http://www.cnblogs.com/rubylouvre/">菜单一 </a> <ul> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> </ul> </li> ..... </ul> </div>
修改完成后，Version2代码:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 } 36 .menu a:hover { 37 background:#00CCCC; 38 color:#000000; 39 } 40 /*下面是子下拉菜单部分*/ 41 .menu ul ul{ 42 visibility:hidden; /*初始为隐藏*/ 43 position:absolute; 44 left:0px; 45 top:32px; 46 } 47 48 .menu ul li:hover ul,/*非IE6*/ 49 .menu ul a:hover ul{/*IE6*/ 50 visibility:visible; 51 } 52 53 .menu ul ul li{ 54 clear:both;/*清除li的浮动,保证垂直显示*/ 55 } 56 57 58 </style> 59 60 <h1>纯CSS多级菜单 by 司徒正美</h1> 61 <div class="menu"> 62 <ul> 63 <li> 64 <a href="http://www.cnblogs.com/rubylouvre/"> 65 菜单一</a> 66 <ul> 67 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 68 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 69 </ul> 70 </li> 71 <li> 72 <a href="http://www.cnblogs.com/rubylouvre/"> 73 菜单二</a> 74 <ul> 75 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 76 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 77 </ul> 78 </li> 79 <li> 80 <a href="http://www.cnblogs.com/rubylouvre/"> 81 菜单三</a> 82 <ul> 83 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 84 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 85 </ul> 86 </li> 87 <li class="last"> 88 <a href="http://www.cnblogs.com/rubylouvre/"> 89 菜单四</a> 90 <ul> 91 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 92 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 93 </ul> 94 </li> 95 </ul> 96 </div> 97 </body> 98 </html>
运行后，我们发现，终于搞定了除IE6之外的浏览器.
由于IE6能支持的伪类少得可怜，仅支持a元素的hover与visited与active。为了让IE6显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到a元素下，但这样一来标准浏览器阵营那边又发难了。
这时我们就要请出IE的条件注释，让页面在IE6下呈现一套结构层，在其他浏览器下呈现另一套。
下面是Version3代码:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 } 36 .menu a:hover { 37 background:#00CCCC; 38 color:#000000; 39 } 40 /*下面是子下拉菜单部分*/ 41 .menu ul ul{ 42 visibility:hidden; /*初始为隐藏*/ 43 position:absolute; 44 left:0px; 45 top:32px; 46 } 47 48 .menu ul li:hover ul,/*非IE6*/ 49 .menu ul a:hover ul{/*IE6*/ 50 visibility:visible; 51 } 52 53 .menu ul ul li{ 54 clear:both;/*清除li的浮动,保证垂直显示*/ 55 } 56 57 58 </style> 59 60 <h1>纯CSS多级菜单 by 司徒正美</h1> 61 <div class="menu"> 62 <ul> 63 <li> 64 <a href="http://www.cnblogs.com/rubylouvre/"> 65 菜单一<!--[if !IE 6]><!--></a><!--<![endif]--> 66 <ul> 67 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 68 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 69 </ul> 70 <!--[if lte IE 6]></a><![endif]--> 71 </li> 72 <li> 73 <a href="http://www.cnblogs.com/rubylouvre/"> 74 菜单二<!--[if !IE 6]><!--></a><!--<![endif]--> 75 <ul> 76 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 77 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 78 </ul> 79 <!--[if lte IE 6]></a><![endif]--> 80 </li> 81 <li> 82 <a href="http://www.cnblogs.com/rubylouvre/"> 83 菜单三<!--[if !IE 6]><!--></a><!--<![endif]--> 84 <ul> 85 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 86 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 87 </ul> 88 <!--[if lte IE 6]></a><![endif]--> 89 </li> 90 <li class="last"> 91 <a href="http://www.cnblogs.com/rubylouvre/"> 92 菜单四<!--[if !IE 6]><!--></a><!--<![endif]--> 93 <ul> 94 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 95 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 96 </ul> 97 <!--[if lte IE 6]></a><![endif]--> 98 </li> 99 </ul> 100 </div> 101 </body> 102 </html>
这时，我们发现，除IE6以上的IE浏览器和其他浏览器都没有什么问题,而IE6不但没有弹出子下拉菜单，还在样式上仍然有那个神秘的li元素,其实，如果我们的.menu没有设置width:100%，高度未给32px，也可以解决这个问题，但是，我们在工作中，经常用到导航条100%的width。IE用hover切换绝对定位子元素时存在问题，但具体情形又分许多种，解法也不一。但针对多级菜单的这种多层子元素，最常用的方法是把它们套在table中，这相当于table布局。因为table的容错能力是最强的，这多得人们一直用它来布局，于是浏览器一直在增强它在这方面的优势。感谢table，我们终于收拾IE6这个怪胎了。为了保持多数浏览器下HTML的结构尽量简洁，我们把它写到IE注释中.
Version4代码:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 } 36 .menu a:hover { 37 background:#00CCCC; 38 color:#000000; 39 } 40 /*下面是子下拉菜单部分*/ 41 .menu ul ul{ 42 visibility:hidden; /*初始为隐藏*/ 43 position:absolute; 44 left:0px; 45 top:32px; 46 } 47 48 .menu ul li:hover ul,/*非IE6*/ 49 .menu ul a:hover ul{/*IE6*/ 50 visibility:visible; 51 } 52 53 .menu ul ul li{ 54 clear:both;/*清除li的浮动,保证垂直显示*/ 55 } 56 57 58 </style> 59 60 <h1>纯CSS多级菜单 by 司徒正美</h1> 61 <div class="menu"> 62 <ul> 63 <li> 64 <a href="http://www.cnblogs.com/rubylouvre/"> 65 菜单一 66 <!--[if !IE 6]><!--></a><!--<![endif]--> 67 <!--[if lte IE 6]><table><tr><td><![endif]--> 68 <ul> 69 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 70 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 71 </ul> 72 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 73 </li> 74 <li> 75 <a href="http://www.cnblogs.com/rubylouvre/"> 76 菜单二 77 <!--[if !IE 6]><!--></a><!--<![endif]--> 78 <!--[if lte IE 6]><table><tr><td><![endif]--> 79 <ul> 80 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 81 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 82 </ul> 83 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 84 </li> 85 <li> 86 <a href="http://www.cnblogs.com/rubylouvre/"> 87 菜单三 88 <!--[if !IE 6]><!--></a><!--<![endif]--> 89 <!--[if lte IE 6]><table><tr><td><![endif]--> 90 <ul> 91 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 92 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 93 </ul> 94 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 95 </li> 96 <li> 97 <a href="http://www.cnblogs.com/rubylouvre/"> 98 菜单四 99 <!--[if !IE 6]><!--></a><!--<![endif]--> 100 <!--[if lte IE 6]><table><tr><td><![endif]--> 101 <ul> 102 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 103 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 104 </ul> 105 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 106 </li> 107 </ul> 108 </div> 109 </body> 110 </html>
运行之后，我们发现，IE6基本正常，但是，同时我们应该留意到IE6水平菜单的异常高度，这是IE6的li元素在包含块级显示元素时会多出5px空隙。由于li元素包含的结构比较复杂，以前用对付img元素的几种方法行不通了。我们可以显式设置a元素的高度，让多余的部分隐藏掉就是。这就唯一不用CSS hack的方法。在.menu a{}是添加overflow:hidden;
Version5代码如下:
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 overflow:hidden; 36 } 37 .menu a:hover { 38 background:#00CCCC; 39 color:#000000; 40 } 41 /*下面是子下拉菜单部分*/ 42 .menu ul ul{ 43 visibility:hidden; /*初始为隐藏*/ 44 position:absolute; 45 left:0px; 46 top:32px; 47 } 48 49 .menu ul li:hover ul,/*非IE6*/ 50 .menu ul a:hover ul{/*IE6*/ 51 visibility:visible; 52 } 53 54 .menu ul ul li{ 55 clear:both;/*清除li的浮动,保证垂直显示*/ 56 } 57 58 59 </style> 60 61 <h1>纯CSS多级菜单 by 司徒正美</h1> 62 <div class="menu"> 63 <ul> 64 <li> 65 <a href="http://www.cnblogs.com/rubylouvre/"> 66 菜单一 67 <!--[if !IE 6]><!--></a><!--<![endif]--> 68 <!--[if lte IE 6]><table><tr><td><![endif]--> 69 <ul> 70 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 71 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 72 </ul> 73 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 74 </li> 75 <li> 76 <a href="http://www.cnblogs.com/rubylouvre/"> 77 菜单二 78 <!--[if !IE 6]><!--></a><!--<![endif]--> 79 <!--[if lte IE 6]><table><tr><td><![endif]--> 80 <ul> 81 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 82 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li> 83 </ul> 84 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 85 </li> 86 <li> 87 <a href="http://www.cnblogs.com/rubylouvre/"> 88 菜单三 89 <!--[if !IE 6]><!--></a><!--<![endif]--> 90 <!--[if lte IE 6]><table><tr><td><![endif]--> 91 <ul> 92 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 93 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 94 </ul> 95 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 96 </li> 97 <li> 98 <a href="http://www.cnblogs.com/rubylouvre/"> 99 菜单四 100 <!--[if !IE 6]><!--></a><!--<![endif]--> 101 <!--[if lte IE 6]><table><tr><td><![endif]--> 102 <ul> 103 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 104 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 105 </ul> 106 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 107 </li> 108 </ul> 109 </div> 110 </body> 111 </html>
这次运行后，IE6的问题完美解决。
以上面这个版本为基本，我们可以一直扩展到多级菜单，下面给出《HTML+CSS兼容IE6,IE8的十级菜单代码》：
1 <!doctype html> 2 <head> 3 <meta charset="gbk"/> 4 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 5 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 6 <title>纯CSS相册 by 司徒正美</title> 7 </head> 8 <body> 9 <style type="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 font-size:12px; 14 } 15 .menu{ 16 width:100%; 17 height:32px; 18 background:#FF6600; 19 } 20 .menu li { 21 float:left; 22 list-style:none; 23 position:relative; 24 } 25 .menu a { 26 display:block; 27 /*position:relative; 28 设置此项时,在标准游览器中惨不忍睹， 29 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ 30 height:32px;line-height:32px;text-align:center; /*前两句保证垂直居中，第三句保证水平居中*/ 31 width:100px; 32 background:#FF6600; 33 color:#6699FF; 34 text-decoration:none; 35 overflow:hidden; 36 } 37 .menu a:hover { 38 background:#00CCCC; 39 color:#000000; 40 } 41 /*下面是子下拉菜单部分*/ 42 .menu ul ul{ 43 visibility:hidden; /*初始为隐藏*/ 44 position:absolute; 45 left:0px; 46 top:32px; 47 } 48 49 /*指定是显示二级子菜单*/ 50 .menu ul li:hover ul.second,/*非IE6*/ 51 .menu ul a:hover ul.second{/*IE6*/ 52 visibility:visible; 53 } 54 55 .menu ul ul li { 56 clear:both;/*垂直显示*/ 57 text-align:left; 58 } 59 .menu .third, .menu .fourth,.menu .fifth,.menu .sixth,.menu .seventh,.menu .eigth,.menu .ninth,.menu .tenth{/*6级菜单*/ 60 top:0px;/*重设子菜单相对于包含块哪个位置出现*/ 61 left:100px; 62 } 63 /*指定是显示三级子菜单*/ 64 .menu ul ul li:hover ul.third, 65 .menu ul ul a:hover ul.third{ 66 visibility:visible; 67 } 68 /*指定是显示四级子菜单*/ 69 .menu ul ul ul li:hover ul.fourth, 70 .menu ul ul ul a:hover ul.fourth{ 71 visibility:visible; 72 } 73 /*指定是显示五级子菜单*/ 74 .menu ul ul ul ul li:hover ul.fifth, 75 .menu ul ul ul ul a:hover ul.fifth{ 76 visibility:visible; 77 } 78 /*指定是显示六级子菜单*/ 79 .menu ul ul ul ul ul li:hover ul.sixth, 80 .menu ul ul ul ul ul a:hover ul.sixth{ 81 visibility:visible; 82 } 83 84 /*指定是显示七级子菜单*/ 85 .menu ul ul ul ul ul ul li:hover ul.seventh, 86 .menu ul ul ul ul ul ul a:hover ul.seventh{ 87 visibility:visible; 88 } 89 90 /*指定是显示八级子菜单*/ 91 .menu ul ul ul ul ul ul ul li:hover ul.eigth, 92 .menu ul ul ul ul ul ul ul a:hover ul.eigth{ 93 visibility:visible; 94 } 95 96 /*指定是显示九级子菜单*/ 97 .menu ul ul ul ul ul ul ul ul li:hover ul.ninth, 98 .menu ul ul ul ul ul ul ul ul a:hover ul.ninth{ 99 visibility:visible; 100 } 101 102 /*指定是显示十级子菜单*/ 103 .menu ul ul ul ul ul ul ul ul ul li:hover ul.tenth, 104 .menu ul ul ul ul ul ul ul ul ul a:hover ul.tenth{ 105 visibility:visible; 106 } 107 108 .menu table{ 109 border-collapse:collapse; 110 } 111 112 113 </style> 114 115 <h1>纯CSS多级菜单 by 司徒正美</h1> 116 <div class="menu"> 117 <ul> 118 <li> 119 <a href="http://www.cnblogs.com/rubylouvre/"> 120 菜单一 121 <!--[if !IE 6]><!--></a><!--<![endif]--> 122 <!--[if lte IE 6]><table><tr><td><![endif]--> 123 <ul class="second"> 124 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li> 125 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li> 126 </ul> 127 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 128 </li> 129 <li> 130 <a href="http://www.cnblogs.com/rubylouvre/"> 131 菜单二 132 <!--[if !IE 6]><!--></a><!--<![endif]--> 133 <!--[if lte IE 6]><table><tr><td><![endif]--> 134 <ul class="second"> 135 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 136 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> 137 <li><a href="http://www.cnblogs.com/rubylouvre/"> 138 二级菜单_22 139 <!--[if !IE 6]><!--></a><!--<![endif]--> 140 <!--[if lte IE 6]><table><tr><td><![endif]--> 141 <ul class="third"> 142 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单31</a></li> 143 <li> 144 <a href="http://www.cnblogs.com/rubylouvre/"> 145 三级菜单_32 146 <!--[if !IE 6]><!--></a><!--<![endif]--> 147 <!--[if lte IE 6]><table><tr><td><![endif]--> 148 <ul class="fourth"> 149 <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_41</a></li> 150 <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_41</a></li> 151 <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_41</a></li> 152 <li> 153 <a href="http://www.cnblogs.com/rubylouvre/"> 154 四级菜单_42 155 <!--[if !IE 6]><!--></a><!--<![endif]--> 156 <!--[if lte IE 6]><table><tr><td><![endif]--> 157 <ul class="fifth"> 158 <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_51</a></li> 159 <li> 160 <a href="http://www.cnblogs.com/rubylouvre/"> 161 五级菜单_52 162 <!--[if !IE 6]><!--></a><!--<![endif]--> 163 <!--[if lte IE 6]><table><tr><td><![endif]--> 164 <ul class="sixth"> 165 <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_61</a></li> 166 <li> 167 <a href="http://www.cnblogs.com/rubylouvre/"> 168 六级菜单_62 169 <!--[if !IE 6]><!--></a><!--<![endif]--> 170 <!--[if lte IE 6]><table><tr><td><![endif]--> 171 <ul class="seventh"> 172 <li><a href="http://www.cnblogs.com/rubylouvre/">七级菜单_71</a></li> 173 <li> 174 <a href="http://www.cnblogs.com/rubylouvre/"> 175 七级菜单_72 176 <!--[if !IE 6]><!--></a><!--<![endif]--> 177 <!--[if lte IE 6]><table><tr><td><![endif]--> 178 <ul class="eigth"> 179 <li><a href="http://www.cnblogs.com/rubylouvre/">八级菜单_81</a></li> 180 <li> 181 <a href="http://www.cnblogs.com/rubylouvre/"> 182 八级菜单_82 183 <!--[if !IE 6]><!--></a><!--<![endif]--> 184 <!--[if lte IE 6]><table><tr><td><![endif]--> 185 <ul class="ninth"> 186 <li><a href="http://www.cnblogs.com/rubylouvre/">九级菜单_91</a></li> 187 <li> 188 <a href="http://www.cnblogs.com/rubylouvre/"> 189 九级菜单_92 190 <!--[if !IE 6]><!--></a><!--<![endif]--> 191 <!--[if lte IE 6]><table><tr><td><![endif]--> 192 <ul class="tenth"> 193 <li><a href="http://www.cnblogs.com/rubylouvre/">十级菜单_10_1</a></li> 194 <li> 195 <a href="http://www.cnblogs.com/rubylouvre/">十级菜单_10_2</a></li> 196 </ul> 197 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 198 </li> 199 </ul> 200 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 201 </li> 202 </ul> 203 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 204 </li> 205 </ul> 206 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 207 </li> 208 </ul> 209 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 210 </li> 211 </ul> 212 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 213 </li> 214 </ul> 215 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 216 </li> 217 </ul> 218 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 219 </li> 220 </ul> 221 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 222 </li> 223 <li> 224 <a href="http://www.cnblogs.com/rubylouvre/"> 225 菜单三 226 <!--[if !IE 6]><!--></a><!--<![endif]--> 227 <!--[if lte IE 6]><table><tr><td><![endif]--> 228 <ul class="second"> 229 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> 230 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> 231 </ul> 232 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 233 </li> 234 <li> 235 <a href="http://www.cnblogs.com/rubylouvre/"> 236 菜单四 237 <!--[if !IE 6]><!--></a><!--<![endif]--> 238 <!--[if lte IE 6]><table><tr><td><![endif]--> 239 <ul class="second"> 240 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li> 241 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> 242 </ul> 243 <!--[if lte IE 6]></td></tr></table></a><![endif]--> 244 </li> 245 </ul> 246 </div> 247 </body> 248 </html>