简单漂亮的导航条_菜单导航特效

简单漂亮的导航条，半弧形的菜单背景，鼠标放上变色，而且是不同的颜色，现在流行的一种菜单样式，个人很喜欢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>导航条</TITLE>
<style type="text/css">
body {background-color:#333;}
#navigation {
background: #333  ;
border-bottom: 1px solid #A1A1A1  ;
margin: 0;
padding: 0;
font-size:9pt;
	}
	#navigation ul, #navigation ul li {
	        list-style: none;
	        margin: 0;
	        padding: 0;
	}
	#navigation ul {
	        padding: 5px 0 5px;
	        text-align: center;
	}
	#navigation ul li {
	        display: inline;
	}
	#navigation ul li a {
	        background: url(http://p1.mb5u.com/texiao/1/atableft.gif) no-repeat left top;
	        color: #FFF;
	        text-decoration: none;
	        padding: 5px 0;
	}
	#navigation ul li span {
	        background: url(http://p1.mb5u.com/texiao/1/atabright.gif) no-repeat right top;
	        padding: 5px 7px 5px 3px;
	        margin: 4px 0 4px 4px;
	}
	#navigation ul li a:hover span {
	        text-decoration: none;
	        background-position: 100% -75px;
	}
	#navigation ul li a:hover {
	        background-position: 0 -75px;
	}
	#navigation #current a {
	        background-position: 0 -150px;
	}
	#navigation #current a span {
	        background-position: 100% -150px;
	}
	/*\*//*/
	#navigation ul li a {
	        display: inline-block;
	        white-space: nowrap; 
	        width: 1px;
	}
	#navigation ul {
	        padding-bottom: 0;
	        margin-bottom: -1px;
	}
	
	/*\*/
	* html #navigation ul li a {
	        padding: 0;
	}
  </style>
 </HEAD>

所属频道：菜单导航特效/更新时间：2011-02-24

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

简单漂亮的导航条_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些