立体感很强的CSS暖色调导航Menu_菜单导航特效

此为一款通用的网站栏目导航条，热色调，特别之处是用CSS控制它显示出了很强的立体感，鼠标放上往的变化也是很明显的，这种色调的菜单也不少，假如颜色不是你想要的，你可以自己改。

<!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</a>">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>立体菜单-For www.mb5u.com</title>
<style type="text/css">
<!--
#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: Arial;
text-transform: lowercase;
}

/* to / */
#navcontainer:after
{
mrc: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 88%;
font-size: 11pt;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

-->
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/" id="current">mb5u.com</a></li>
<li><a href="/sort/list_1_1.shtml">ASP</a></li>
<li><a href="/sort/list_11_203_1.shtml">AJAX</a></li>
<li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li>
<li><a href="/sort/list_11_1.shtml">EXT</a></li>
</ul></div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

立体感很强的CSS暖色调导航Menu_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些