纯css菜单显示 - 铱哥的趣屋

首页 > 程序 > 纯css菜单显示

作者：ghostry 发布时间：2012-01-10 浏览: 4529

转载注明出处: https://blog.ghostry.cn/program/%E7%BA%AFcss%E8%8F%9C%E5%8D%95%E6%98%BE%E7%A4%BA.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head><title>CSS3 jQuery style menu</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* { margin:0;
	padding:0;
}
html {height: 100%;}
body{
	position: relative;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
	position: relative;
	float: left;
}
ul.nav {
	list-style: none;
	display: block;
	width: 200px;
	position: relative;
	top: 100px;
	left: 100px;
	padding: 60px 0 60px 0;
	background: url(shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}
li {
	margin: 5px 0 0 0;
}
ul.nav li a {
	-webkit-transition: all 0.3s ease-out;
	background: #cbcbcb url(border.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
 	-webkit-border-bottom-right-radius: 10px;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
}
ul.nav li a:hover {
	background: #ebebeb url(border.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}
</style>
</head><body><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">C++</a></li><li><a href="#" data-ke-src="#">Mootools</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li><li><a href="#" data-ke-src="#">jQuery</a></li><li><a href="#" data-ke-src="#">Ajax</a></li><li><a href="#" data-ke-src="#">PHP</a></li><li><a href="#" data-ke-src="#">Perl</a></li></ul></div><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li><li><a href="#" data-ke-src="#">jQuery</a></li><li><a href="#" data-ke-src="#">Ajax</a></li><li><a href="#" data-ke-src="#">PHP</a></li></ul></div><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li></ul></div></body></html>

提示：您可以先修改部分代码再运行

标签: position width display CSS html

上一篇: 修改多点触控相关的文件
下一篇: 运行代码框