水平导航条效果 div+css

最新推荐文章于 2024-05-06 22:33:41 发布

mjygz

最新推荐文章于 2024-05-06 22:33:41 发布

阅读量716

点赞数

文章标签：导航 position html

html:

<div class="navigation">
					<ul>
						<li>
			            	<a href="#">测试<b></b></a>
			            	<ul>
			           			<li ><a href="#">最新评论</a></li>
								<li ><a href="#">个人信息查询</a></li>
			           			<li ><a href="#">退出</a></li>
			            	</ul>
				        </li>
						<li>
			            	<a href="#">测试2<b></b></a>
			            	<ul>
			           			<li ><a href="#">最新评论</a></li>
								<li ><a href="#">个人信息查询</a></li>
			           			<li ><a href="#">退出</a></li>
			            	</ul>
				        </li>
					</ul>
				</div>

css:


.navigation ul li{
	float:left;
	position:relative;
	margin-right: 14px;
	z-index: 100;
}

.navigation ul li a{
	display: block;
}

.navigation ul li ul{
	display: none;
	background-color: #52D1A0;
}

.navigation ul li ul{
	display: none;
	position:absolute;
}

.navigation ul li:hover ul{
	display: block;
}

.navigation ul li ul li{
	display: block;
	width:100px;
	
}