HTML5 div css3 侧边菜单导航栏

TAG：侧边栏 CSS3菜单　时间：2015-06-13　浏览：
HTML5 div css3 侧边菜单导航栏，IE8及低于IE8的浏览器都不支持本效果，测试运行代码请使用火狐或chrome浏览器，或者使用最新的IE9浏览器。

<title>div css3 侧边菜单导航栏</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";}
.demo{margin:60px auto;width:720px;}
.navbox{float:left;}
ul.nav{width:200px;padding:60px 0 60px 0;background:url() no-repeat;}
ul.nav li{margin:5px 0 0 0;}
ul.nav li a{
	background:#cbcbcb url() no-repeat;color:#174867;padding:7px 15px 7px 15px;width:100px;display:block;text-decoration:none;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-webkit-box-shadow:2px 2px 4px #888;
	-moz-box-shadow:2px 2px 4px #888;
	-o-box-shadow:2px 2px 4px #888;
}
ul.nav li a:hover{background:#ebebeb url() no-repeat;color:#67a5cd;padding:7px 15px 7px 30px;}
</style>
<div class="demo">
	<div class="navbox">
		<ul class="nav">
			<li><a href="#">XHTML</a></li>
			<li><a href="#">C++</a></li>
			<li><a href="#">Mootools</a></li>
			<li><a href="#">HTML5</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Ajax</a></li>
			<li><a href="#">PHP</a></li>
			<li><a href="#">Perl</a></li>
		</ul>
	</div>
	<div class="navbox">
		<ul class="nav">
			<li><a href="#">XHTML</a></li>
			<li><a href="#">HTML5</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Ajax</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
	<div class="navbox">
		<ul class="nav">
			<li><a href="#">XHTML</a></li>
			<li><a href="#">HTML5</a></li>
			<li><a href="#">CSS</a></li>
		</ul>
	</div>
</div>

HTML5 div css3 侧边菜单导航栏

相关特效代码

网页特效下载区