CSS+XHTML有立體感的菜單_菜單導航特效

立體感很不錯的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>
<meta http-equiv="Content-Type" mrc="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(http://p1.mb5u.com/texiao/1/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(http://p1.mb5u.com/texiao/1/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://p1.mb5u.com/texiao/1/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://p1.mb5u.com/texiao/1/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://p1.mb5u.com/texiao/1/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(http://p1.mb5u.com/texiao/1/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(http://p1.mb5u.com/texiao/1/rightb.gif);
border-bottom-color:#ccc;
}

.menu li:hover > a b
{
color:#000;
background: transparent url(http://p1.mb5u.com/texiao/1/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(http://p1.mb5u.com/texiao/1/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(http://p1.mb5u.com/texiao/1/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></a>

<ul>
<li><a href="#" title="我是嘿嘿">嘿嘿</a></li>
<li><a href="#" title="我是哈哈">哈哈</a></li>
<li><a href="#" title="我是哦哦">哦哦</a></li>
</ul>

</li>
<li><a href="#" title="William Turner"><em class="lft"></em><b>CSS菜單</b><em class="rgt"></em></a>

<ul>
<li><a href="#" title="Fishermen at Sea">國外菜單</a></li>
<li><a href="#" title="The Shipwreck">國內菜單</a></li>
</ul>

</li>
<li><a href="#" title="Henri Matisse"><em class="lft"></em><b>英文示例</b><em class="rgt"></em></a>

<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>

</li>
<li><a href="#" title="Paul Cezanne"><em class="lft"></em><b>我的編程樂園</b><em class="rgt"></em></a>

<ul>
<li><a href="#" title="學習型源代碼">學習型</a></li>
<li><a href="#" title="實用型源代碼">實用型</a></li>
</ul>

</li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

CSS+XHTML有立體感的菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些