參考了別人的作品，自己動(dòng)手做了一個(gè)。(+﹏+)~
FF3.0/Opera9.6/IE6通過
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS實(shí)現(xiàn)三級(jí)菜單</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:12px/160% Verdana, Arial, Helvetica, sans-serif;
background:#ccc;
}
a {
text-decoration:none;
}
ul {
list-style:none;
border-top:1px solid #fff;
border-left:1px solid #fff;
}
#menu {
width:908px;
margin:0 auto;
}
#menu ul li {
float:left;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
line-height:25px;
}
/*隱藏第一級(jí)菜單后面的菜單*/
#menu ul ul {
display:none;
position:absolute;
}
/*消除table多余的空間*/
* html #menu ul li table {
border-collapse:collapse;
margin-top:-1px;
}
#menu a:link, #menu a:visited {
display:block;
width:150px;
background:#c00;
color:#fff;
line-height:25px;
height:25px;
text-align:center;
text-transform:uppercase;
}
#menu ul li a:hover {
position:relative;
background:#333;
color:#ff0;
border:0;
}
#menu ul li:hover {
position:relative;
}
/*顯示第二級(jí)菜單*/
#menu ul :hover ul {
display:block;
position:absolute;
top:25px;
left:-1px;
}
#menu ul :hover ul a:link, #menu ul :hover ul a:visited {
background:#7D0000;
}
#menu ul :hover ul a:hover {
background:#333;
}
/*隱藏第二級(jí)后面的菜單*/
#menu ul :hover ul ul {
display:none;
}
/*顯示第三級(jí)菜單*/
#menu ul :hover ul :hover ul {
display:block;
left:150px;
top:-1px;
}
/*隱藏第三級(jí)菜單后面的菜單*/
#menu ul :hover ul :hover ul ul {
display:none;
}
/*顯示第四級(jí)菜單*/
#menu ul :hover ul :hover ul :hover ul {
display:block;
}
/*隱藏第四級(jí)菜單后面的菜單*/
#menu ul :hover ul :hover ul :hover ul ul {
display:none;
}
/*顯示第五級(jí)菜單*/
#menu ul :hover ul :hover ul :hover ul :hover ul {
display:block;
}
.clr {
clear:both;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">home
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- 第二級(jí)菜單開始 -->
<ul>
<li><a href="#">serve</a></li>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
<li><a href="#">contact</a></li>
<li><a href="Fix Layout 2.html">blog
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- 第三級(jí)菜單開始 -->
<ul>
<li><a href="#">about</a></li>
<li><a href="#">serve
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- 第四級(jí)菜單開始 -->
<ul>
<li><a href="#">about</a></li>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
<li><a href="#">serve
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!-- 第五級(jí)菜單開始 -->
<ul>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
</ul>
<!-- 第五級(jí)菜單結(jié)束 -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- 第四級(jí)菜單結(jié)束 -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- 第三級(jí)菜單結(jié)束 -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- 第二級(jí)菜單結(jié)束 -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">booke</a></li>
<li><a href="#">booke
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Fix Layout 2.html">blog
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">about</a></li>
<li><a href="#">serve</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">contact</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">booke</a></li>
<li><a href="#">booke</a></li>
<li><a href="#">booke</a></li>
<div class="clr"></div>
</ul>
</div>
</body>
</html>
jimmy1985