CSS实现绿色带阴影自适应宽度的菜单代码

代码简介:

绿色带阴影划过变色自适应宽度的纯CSS菜单,用了超多的修饰词来形容她,因为确实很不错哦!它可以在多行上显示,老外的东西就是不一样,不佩服不行哦。使用的时候可以单独将菜单部分摘去,再优化一下CSS,这样更完美了。

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS实现绿色带阴影自适应宽度的菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
html,body{
	margin:0;
	padding:30px 10px;
	text-align:center;
}
#outer{
	width:780px;
	margin:auto;
	text-align:left;
	border:1px solid #000;
}
#outer{overflow:hidden;position:relative}
.navwrap{
	float:left;
	position:relative;
	left:50%;
	text-align:left;
	margin-bottom:2em;
}
.navwrap ul{
	list-style:none; 
	position:relative;
	left:-50%;
	margin:0;
	padding:0;
} 
.navwrap li{
	border:1px solid #eff2df;
	float:left;
	margin:0 10px 0 0;
	background:#809900;
}
.navwrap li.last{margin-right:0}
.navwrap li a{
	float:left;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	text-decoration:none;
	padding:6px 10px;
	font-weight:bold;
}
.navwrap li a:hover{
	background:#809900;
	color:#fff;
}
p{clear:both;padding:10px}
h1{text-align:center;margin:1em 0;}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}

</style>
<!--[if IE ]>
<style type="text/css">
.navwrap ul{float:left;} 

</style>
<![endif]-->
</head>
<body>
<div id="outer">
	<h1>Welcome To WebDm.cn</h1>
	<div class="navwrap">
		<ul>
			<li><a href="/">Button 1</a></li>
			<li><a href="/">Button 2's a WebDm.cn</a></li>
			<li><a href="http://www.webdm.cn">This is Button 3</a></li>
			<li><a href="#">B 4</a></li>
			<li><a href="/">jQuery Demos</a></li>
			<li class="last"><a href="/">Ajax</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
			<li><a href="#">ASP Codes</a></li>
			<li><a href="http://www.webdm.cn">Hello World!</a></li>
			<li class="last"><a href="/">WebDm.cn</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/2cf486f4-d179-420b-88ab-f6f33d37bf6e.html

posted @ 2011-03-08 09:45  网页代码站  阅读(271)  评论(0编辑  收藏  举报