极酷的CSS导航特效 - 站长资源库

答案：<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312">
<head>
<title>极酷的CSS导航特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#invertedtabs{
margin-left:5px;
padding: 0;
width: 98%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 0px;
}

#invertedtabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em;
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(http://www.zzzyk.com/jscss/demoimg/200906/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(http://www.zzzyk.com/jscss/demoimg/200906/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ 
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; 
}

</style>
</head>
<body>
 <div id="invertedtabsline">&nbsp;</div>
 <div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="/" title="主页"><span>主 页</span></a></li>
<li><a href="/jscss/" title="酷站"><span>酷 站</span></a></li>
<li id="current"><a href="/jscss/" title="PNG"><span>PNG</span></a></li>
<li><a href="http://www.zzzyk.com/" title="GIF"><span>GIF</span></a></li>	
<li><a href="/jscss/" title="代码"><span>代 码</span></a></li>
<li><a href="#" title="色彩"><span>色 彩</span></a></li>
<li><a href="/jscss/" title="便利"><span>便 利</span></a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
上一个：CSS 竖排折叠菜单
下一个：CSS+JS滑动门菜单（荐）
更多图片编程知识: