div+css制作一个纯css下拉菜单导航



193 768 257



特效描述:div+css 纯css 下拉菜单导航,div+css导航应用一个纯css样式表和div布局制作一个下拉菜单导航,兼容IE,firefox等主流浏览器。div css模板和div css教程下载

代码结构

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="http://www.dijiuzhanzhang.com/">我的CHINAY</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的首页</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的日志</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的日志</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的相册</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的收藏</a>
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				社区圈子
				<div class="list">
					<a href="http://www.dijiuzhanzhang.com/">我的CHINAY</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的首页</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的日志</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的相册</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的收藏</a><br />
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				我的短信
				<div class="list">
					<a href="http://www.dijiuzhanzhang.com/">我的CHINAY</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的相册</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的收藏</a>
				</div>
			</li>
			<li class="menu2" onMouseOver="this.className='menu1'" onmouseout="this.className='menu2'">
				账户管理
				<div class="list">
					<a href="http://www.dijiuzhanzhang.com/">我的CHINAY</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的首页</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的日志</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的相册</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的收藏</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的日志</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的相册</a><br />
					<a href="http://www.dijiuzhanzhang.com/">我的收藏</a>
				</div>
			</li>
		</ul>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 二级导航菜单 滑动选项卡切换 文字收缩展开 下拉导航菜单 图片滑动 图片收缩展开 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到