您的位置：首页 > Web前端 > CSS

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

2011-03-08 09:45 567 查看

代码简介：

绿色带阴影划过变色自适应宽度的纯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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航