CSS+XHTML有立体感的菜单

答案：<!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=gb2312" />
<title>CSS+XHTML有立体感的菜单</title>
</head>
<style type="text/css">
 body {
	background: #fff;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(/jscss/demoimg/200906/line.gif) bottom left repeat-x;
margin-bottom:5em;
}

* html .menu {padding-bottom:0;}

.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}

.menu li{
float:left;
}

.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}

.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(/jscss/demoimg/200906/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(/jscss/demoimg/200906/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(/jscss/demoimg/200906/righta.gif);
border-bottom:1px solid #777;
}

.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}

.menu :hover {
white-space:normal;
}

.menu a:hover b {
color:#000;
background: transparent url(/jscss/demoimg/200906/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(/jscss/demoimg/200906/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(/jscss/demoimg/200906/rightb.gif);
border-bottom-color:#ccc;
}

.menu li:hover > a b
{
color:#000;
background: transparent url(/jscss/demoimg/200906/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(/jscss/demoimg/200906/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(/jscss/demoimg/200906/rightb.gif);
border-bottom-color:#ccc;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}

.menu ul :hover ul li {
display:block; 
border-left:1px solid #777; 
background:#ccc; 
height:2em;
}
.menu ul :hover ul li a {
display:block; 
font-size:0.8em; 
height:2em; 
line-height:2.5em; 
width:auto; 
float:left; 
color:#444; 
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>
<body>

<div class="menu">
<ul>
<li><a href="#" title="John Constable"><em class="lft"></em><b>源码网站</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="我是嘿嘿">嘿嘿</a></li>
<li><a href="#" title="我是哈哈">哈哈</a></li>
<li><a href="#" title="我是哦哦">哦哦</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="William Turner"><em class="lft"></em><b>CSS菜单</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="Fishermen at Sea">国外菜单</a></li>
<li><a href="#" title="The Shipwreck">国内菜单</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="Henri Matisse"><em class="lft"></em><b>英文示例</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#" title="The Dream">The Dream</a></li>
<li><a href="#" title="Woman in Blue">Woman in Blue</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="Paul Cezanne"><em class="lft"></em><b>我的编程乐园</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="学习型源代码">学习型</a></li>
<li><a href="#" title="实用型源代码">实用型</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
上一个：126邮箱精美滑动门
下一个：DIV+js后台左侧专用菜单
更多图片编程知识: