橙色水平web2.0CSS菜单

演示效果截图

用到的图片

CSS代码

#time4bed-nav{position:relative;height:43px;font-size:14px;

text-transform:uppercase;background:#fff

 url("/UploadFile/image/orange-css-nav/time4bed_bg.gif")

 repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}

#time4bed-nav ul{margin:0;padding:0;list-style-type:none;

width:auto;float:left;}

#time4bed-nav ul li{display:block;float:left;margin:0 2px;}

#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;

text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}

#time4bed-nav ul li a span{display:block;float:left;

padding:0 25px 0 0;height:31px;width:auto;}

#time4bed-nav ul li a:hover{color:#fff;}

#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}

#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{

color:#894d12;background:transparent

 url("/UploadFile/image/orange-css-nav/time2bed_left-ON.gif")

 no-repeat top left;}

#time4bed-nav ul li a.current span{background:transparent

 url("/UploadFile/image/orange-css-nav/time2bed_right-ON.gif")

 no-repeat top right;height:43px;}

HTML代码

<div id="time4bed-nav">

<ul>

	<li><a href="http://www.865171.cn/">

		<span>Home</span></a></li>

	<li><a href="http://www.865171.cn/" class="current">

		<span>About Us</span></a></li>

	<li><a href="http://www.865171.cn/">

		<span>www.865171.cn</span></a></li>

</ul>

</div>