绿色带阴影滑过变色自适应宽度的纯CSS菜单

2024-09-05 12:19:44

字体：大中小

来源：转载

供稿：网友

绿色带阴影划过变色自适应宽度的纯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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绿色菜单</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></head><body><div id="outer">	<div class="navwrap">		<ul>			<li>Button 1</li>			<li>Button 2's</li>			<li>This is Button 3</li>			<li>jQuery Demos</li>			<li class="last">Ajax</li>		</ul>	</div>	<div class="clearer"></div>		<div class="navwrap">		<ul>			<li>ASP Codes</li>			<li>Hello World!</li>			<li class="last">Mootools</li>		</ul>	</div>	<div class="clearer"></div>		</div></body></html>

上一篇：自己写的CSS+JS滑动门菜单

下一篇：用作排行榜的CSS侧边列表滑动门

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注