这部分最后给出的成品效果比较惊人，也就是传说中的纯 CSS 六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4 与 chrome2），而一点 CSS hack 也没有用。毕竟 CSS hack 只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。
司徒正美 纯 CSS 多级菜单
由于 IE6 能支持的伪类少得可怜，仅支持 a 元素的 hover 与 visited 与 active。为了显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到 a 元素下，但这样一来 firefox 那边又发难了。这时我们就要请出 IE 的条件注释，让页面在 IE6 下呈现一套结构层，在其他浏览器下呈现另一套。
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">菜单三</a><![endif]-->
<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>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">菜单二二</a><![endif]-->
<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>
<li>
//************略***********
</li>
<li>
//************略***********
</li>
</ul>
</div>
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
/*position:relative; 发现放在 a 元素中，
在标准游览器中惨不忍睹，
和纯 CSS 相册 3 的第一个运行框在 chrome 中遇到的 bug 一样 */
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 开始时是隐藏的 */
position:absolute;
left:0px;
top:32px;
}
.menu ul li:hover ul,/* 非 IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
.menu ul li a strong{color:aqua;}
</style>
<h1> 纯 CSS 多级菜单 by 司徒正美 </h1>
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 一 </strong></a><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _12</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 二 </strong></a><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _12</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 三 </strong></a><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _31</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _32</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 四 </strong></a><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _41</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _42</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
运行代码
但是这样做不能使 IE6 的二级菜单弹出来，这情形我在纯 CSS 相册遇到许多次。查一下国外的资料，说是 IE 用 hover 切换绝对定位子元素时存在问题，但具体情形又分许多种，解法也不一。但针对多级菜单的这种多层子元素，最常用的方法是把它们套在 table 中，这相当于 table 布局。因为 table 的容错能力是最强的，这多得人们一直用它来布局，于是浏览器一直在增强它在这方面的优势。感谢 table，我们终于收拾 IE6 这个怪胎了。
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">菜单<strong>一</strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
</ul>
</td></tr></table>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">菜单<strong>二</strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
</ul>
</td></tr></table>
</li>
<li>
//*************略**************
</li>
<li>
//*************略**************
</li>
</ul>
</div>
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
/*position:relative; 发现放在 a 元素中，
在标准游览器中惨不忍睹，
和纯 CSS 相册 3 的第一个运行框在 chrome 中遇到的 bug 一样 */
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 开始时是隐藏的 */
position:absolute;
left:0px;
top:32px;
}
.menu ul li:hover ul,/* 非 IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
.menu ul li a strong{color:aqua;}
</style>
<h1> 纯 CSS 多级菜单 by 司徒正美 </h1>
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 一 </strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _12</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 二 </strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _12</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 三 </strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _31</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _32</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单 <!--[if !IE 6]><!--><strong> 四 </strong></a><![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _41</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _42</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
运行代码
但这样一来对 firefox 等浏览器添加了许多多余的结构层代码，它们基本不需要 table 这东西就能运作良好。因此，我们把 table 整到 IE 条件注释中。如：
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">菜单
<strong>一</strong></a><![endif]-->
<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>
<li>
//*************略************
</li>
<li>
//*************略************
</li>
<li>
//*************略************
</li>
</ul>
</div>
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
/*position:relative; 发现放在 a 元素中，
在标准游览器中惨不忍睹，
和纯 CSS 相册 3 的第一个运行框在 chrome 中遇到的 bug 一样 */
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 开始时是隐藏的 */
position:absolute;
left:0px;
top:32px;
}
.menu ul li:hover ul,/* 非 IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
</style>
<h1> 纯 CSS 多级菜单 by 司徒正美 </h1>
<div class="menu">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单一
<!--[if !IE 6]><!--></a><![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _11</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _12</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单二
<!--[if !IE 6]><!--></a><![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _21</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _22</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单三
<!--[if !IE 6]><!--></a><![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _31</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _32</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单四
<!--[if !IE 6]><!--></a><![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _41</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _42</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
运行代码
然而，这结构层还能进一步精简。同时我们应该留意到 IE6 水平菜单的异常高度，这是 IE6 的 li 元素在包含块级显示元素时会多出 5px 空隙。由于 li 元素包含的结构比较复杂，以前用对付 img 元素的几种方法行不通了。我们可以显式设置 a 元素的高度，让多余的部分隐藏掉就是。这就唯一不用 CSS hack 的方法。
更精简的结构层：
<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>
<li>
//***********略*********
</li>
<li>
//***********略*********
</li>
<li>
//***********略*********
</li>
</ul>
</div>
|
.menu a {
display:block;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;
}
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
/*position:relative; 发现放在 a 元素中，
在标准游览器中惨不忍睹，
和纯 CSS 相册 3 的第一个运行框在 chrome 中遇到的 bug 一样 */
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★*/
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 开始时是隐藏的 */
position:absolute;
left:0px;
top:32px;
}
.menu ul li:hover ul,/* 非 IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
</style>
<h1> 纯 CSS 多级菜单 by 司徒正美 </h1>
<div class="menu">
<ul>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单二 </a>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _21</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _22</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单三 </a>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _31</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _32</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
<a href="http://www.cnblogs.com/rubylouvre/"> 菜单四 </a>
<ul>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _41</a></li>
<li><a href="http://www.cnblogs.com/rubylouvre/"> 二级菜单 _42</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
运行代码
基于上面的结构我们就可以开发多级子菜单了。
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★*/
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 隐藏所有子菜单（二级的三级）*/
position:absolute;
left:0px;
top:32px;
}
/* 指定是显示二级子菜单 */
.menu ul li:hover ul.second,/* 非 IE6*/
.menu ul a:hover ul.second{/*IE6*/
visibility:visible;
}
<pre><code>.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
.menu .third,.menu .fourth{
top:0px;/* 重设子菜单相对于包含块哪个位置出现 */
left:100px;
}
/* 指定是显示三级子菜单 */
.menu ul ul li:hover ul.third,
.menu ul ul a:hover ul.third{visibility:visible;}
/* 指定是显示三级子菜单 */
.menu ul ul ul li:hover ul.fourth,
.menu ul ul ul a:hover ul.fourth{visibility:visible;}
/* 重设子菜单在鼠标滑过时的样式，有多少个 ul 就表明当前是多少级子菜单 */
/* 二级子菜单 */
.menu ul ul a:hover{
background:black;
color:white;
}
/* 三级子菜单 */
.menu ul ul ul a:hover{
background:#B45B3E;
color:white;
}
.menu ul ul ul ul a:hover{
background:#FFE8AA;
color:#68DFFB;
}
</code></pre>
<p></style><br />
<h1> 这是可是四级菜单哦！</h1><br />
<div class="menu"><br />
<ul><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单一 </a><br />
<ul class="second"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _11</a><br />
<ul class="third"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _13</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _14</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _12</a><br />
<ul class="third"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _21</a><br />
<ul class="fourth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _31</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _32</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _22</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _23</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _24</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单二 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _22</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单三 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _31</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _32</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单四 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _41</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _42</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
运行代码
这时我们又发现在 IE6 下，当我们的鼠标移到二级菜单的上面时，一级菜单项会出现一个边框，颜色为 hover 时的背景色。在 IE6，table 与单元格之间 (cellspacing)，单元格与单元格的内容之间(cellspadding) 是存在空隙，背景色为 transparent，也就是说永远显示下一层的背景色。由于我们设置 a 的 display:block，它会占满 td 的所有空间，因此那个神秘的边框应该是 cellspacing。我们可以用以下的方式证实我的猜想。
.menu table {
border:1px solid aqua;
}
.menu table td{
border:1px solid aqua;
}
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★*/
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 隐藏所有子菜单（二级的三级）*/
position:absolute;
left:0px;
top:32px;
}
/* 指定是显示二级子菜单 */
.menu ul li:hover ul.second,/* 非 IE6*/
.menu ul a:hover ul.second{/*IE6*/
visibility:visible;
}
<pre><code>.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
.menu .third,.menu .fourth{
top:0px;/* 重设子菜单相对于包含块哪个位置出现 */
left:100px;
}
/* 指定是显示三级子菜单 */
.menu ul ul li:hover ul.third,
.menu ul ul a:hover ul.third{visibility:visible;}
/* 指定是显示三级子菜单 */
.menu ul ul ul li:hover ul.fourth,
.menu ul ul ul a:hover ul.fourth{visibility:visible;}
/* 重设子菜单在鼠标滑过时的样式，有多少个 ul 就表明当前是多少级子菜单 */
/* 二级子菜单 */
.menu ul ul a:hover{
background:black;
color:white;
}
/* 三级子菜单 */
.menu ul ul ul a:hover{
background:#B45B3E;
color:white;
}
.menu ul ul ul ul a:hover{
background:#FFE8AA;
color:#68DFFB;
}
.menu table {border:1px solid aqua;}
.menu table td{border:1px solid aqua;}
</code></pre>
<p></style><br />
<h1> 这是可是四级菜单哦！</h1><br />
<div class="menu"><br />
<ul><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单一 </a><br />
<ul class="second"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _11</a><br />
<ul class="third"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _13</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _14</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _12</a><br />
<ul class="third"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _21</a><br />
<ul class="fourth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _31</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _32</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _22</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _23</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _24</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单二 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _22</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单三 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _31</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _32</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单四 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _41</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _42</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
运行代码
知道问题的所在，我们就可以对症下药了。解决方法有二。一是设置 cellspacing 等于零。由于 cellspacing 为 DOM 属性，非 CSS 属性，换言之，有多少个 table 我们就要写多少次。二是设置 border-collapse 为 collapse，因为这样会把 table 与它里面的 td 的 border 合而为一，这样它们之间的空隙也不复存在。我们当然选择第二种啦。
.menu table {
border-collapse: collapse;
}
|
<!doctype html>
<title> 纯 CSS 多级菜单 by 司徒正美 </title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯 CSS 多级菜单 by 司徒正美" />
<meta name="description" content="纯 CSS 多级菜单 by 司徒正美" />
</head>
<body>
<style type="text/css">
* {
margin:0;
padding:0;
}
.menu {font-size:12px;}
.menu li {/* 水平菜单 */
float:left;
list-style:none;
position:relative;/* 把包含块移动 li 元素 */
}
.menu a {
display:block;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★*/
}
.menu a:hover {
background:#369;
color:#fff;
}
/* 新增的二级菜单部分 */
.menu ul ul {
visibility:hidden;/* 隐藏所有子菜单（二级的, 三级的）*/
position:absolute;
left:0px;
top:32px;
}
/* 指定是显示二级子菜单 */
.menu ul li:hover ul.second,/* 非 IE6*/
.menu ul a:hover ul.second{/*IE6*/
visibility:visible;
}
<pre><code>.menu ul ul li {
clear:both;/* 垂直显示 */
text-align:left;
}
.menu .third,.menu .fourth,.menu .fifth,.menu .sixth{
top:0px;/* 重设子菜单相对于包含块哪个位置出现 */
left:100px;
}
/* 指定是显示三级子菜单 */
.menu ul ul li:hover ul.third,
.menu ul ul a:hover ul.third{visibility:visible;}
/* 指定是显示四级子菜单 */
.menu ul ul ul li:hover ul.fourth,
.menu ul ul ul a:hover ul.fourth{visibility:visible;}
/* 指定是显示五级子菜单 */
.menu ul ul ul ul li:hover ul.fifth,
.menu ul ul ul ul a:hover ul.fifth{visibility:visible;}
/* 指定是显示六级子菜单 */
.menu ul ul ul ul ul li:hover ul.sixth,
.menu ul ul ul ul ul a:hover ul.sixth{visibility:visible;}
/* 重设子菜单在鼠标滑过时的样式，有多少个 ul 就表明当前是多少级子菜单 */
/* 二级子菜单 */
.menu ul ul a:hover{
background:black;
color:white;
}
/* 三级子菜单 */
.menu ul ul ul a:hover{
background:#B45B3E;
color:#369;
}
.menu ul ul ul ul a:hover{
background:#FFE8AA;
color:#68DFFB;
}
.menu ul ul ul ul ul a:hover{
background:#8080C0;
color:#F8F8F8;
}
.menu ul ul ul ul ul ul a:hover{
background:#f00;
color:#000;
}
.menu table{border-collapse:collapse;}
</code></pre>
<p></style><br />
<h3> 纯 CSS 多级菜单 by 司徒正美 </h3><br />
<p> 这是六级菜单，只要页面够长，十级也能弄出来！</p><br />
<div class="menu"><br />
<ul><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单一 </a><br />
<ul class="second"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _11</a><br />
<ul class="third"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _11</a><br />
<ul class="fourth"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _11</a><br />
<ul class="fifth"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _11</a><br />
<ul class="sixth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _13</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _11</a><br />
<ul class="sixth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _13</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _11</a><br />
<ul class="sixth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _13</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _12</a><br />
<ul class="sixth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _11</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _13</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _12</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _13</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _14</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _12</a><br />
<ul class="third"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _21</a><br />
<ul class="fourth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _22</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _22</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _23</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _24</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单二 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _21</a></li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _22</a><br />
<ul class="third"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _22</a></li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _23</a><br />
<ul class="fourth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _22</a></li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 四级菜单 _23</a><br />
<ul class="fifth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _22</a></li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 五级菜单 _23</a><br />
<ul class="sixth"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _21</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _22</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _23</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _24</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _25</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 六级菜单 _26</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单三 </a><br />
<ul class="second"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _31</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _32</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 菜单四 </a><br />
<ul class="second"><br />
<li><br />
<!--[if lte IE 6]><a href=""><table><tr><td><![endif]--><br />
<a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _41</a><br />
<ul class="third"><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _41</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _42</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _43</a></li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 三级菜单 _44</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
<li><a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> 二级菜单 _42</a></li><br />
</ul><br />
<!--[if lte IE 6]></td></tr></table></a><![endif]--><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
运行代码
最后总结一下：
- 保证 hover 时，对应的子菜单的 top 与 left 在包含块的范围内。
- 通常我们是用 hover 来调用 display 实现子元素的隐现，但在 IE6 中，mouseout 后它不会乖乖消失，得换 visibility 上阵。
- 某些浏览器在用 a:hover 来切换绝对定位子元素存在 bug，统一用 li:hover 实现。
- 在 IE6 中，激活父级元素的 a:hover 后再调用其子孙元素的 a:hover 时，会没有反应，换言之，不继续向下渲染。这时我们需要 table 这个容错能力最强的标签出马。
- 为了跨平台的需要，我们需要用到 IE 条件注释来切换相应的结构层代码。
- 在 IE6 中，当 li 元素包含 display 为 block 的元素时（如 a）会多出 5px，我们可以用 overflow:hidden 收拾之。
- 在 IE6 中，table 与 td 是存在空隙，当我们移动某个子菜单项时，其父菜单项就会因为这些透明的空间而染上两条边。解决方法：设置 table 的 border-collapse 为 collapse。
如果您觉得此文有帮助，可以打赏点钱给我支付宝 1669866773@qq.com ，或扫描二维码
