div+css下拉菜单导航特效代码下载


div+css下拉菜单导航特效代码下载
div+css下拉菜单导航特效代码下载以及下拉菜单导航等js/jquery网页特效代码下载。

1. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;}
#nav{padding:0 5px;z-index:1;left:198px;width:600px;position:absolute;top:25px;height:30px;}
#nav li{float:left;text-align:center;}
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;}
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;}
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;}
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;}
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;}
</style>
	<div id="nav">
		<ul>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				我的首页 
				<div class="list">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				社区圈子
				<div class="list">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				我的短信
				<div class="list">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				账户管理
				<div class="list">
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a><br />
					<a href="https://www.51qianduan.com/" target="_blank">51前端</a>
				</div>
			</li>
		</ul>
	</div>

相关推荐

发表评论

相关文章