有立体感的CSS菜单

时间：2011-01-29 来源：网页代码站

立体感很不错的CSS+XHTML菜单，看上去还不错，来自CSSplay网站，老外的作品就是不一样，最基码兼容性非常好，符合WEb标准，不过用到了几个图片，你需要下载他们，以后就方便了。

代码内容：


<!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>
<title>有立体感的CSS菜单_网页代码站(www.webdm.cn)</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(http://www.webdm.cn/images/20090910/line33.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(http://www.webdm.cn/images/20090910/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(http://www.webdm.cn/images/20090910/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(http://www.webdm.cn/images/20090910/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(http://www.webdm.cn/images/20090910/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(http://www.webdm.cn/images/20090910/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(http://www.webdm.cn/images/20090910/rightb.gif);
border-bottom-color:#ccc;
}

.menu li:hover > a b
{
color:#000;
background: transparent url(http://www.webdm.cn/images/20090910/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(http://www.webdm.cn/images/20090910/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(http://www.webdm.cn/images/20090910/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="http://www.webdm.cn" 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="http://www.webdm.cn" 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="http://www.webdm.cn" 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="http://www.webdm.cn" title="实用型源代码">实用型源码</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
<br>
<p>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/e773d443-47ba-4d03-b2b8-ab00c19cda40.html