CSS下拉菜单

<ul class="nav">
	<li><a href="/">首页</a></li>
	<li class="drop-down">
		<a href="javascript:;">出售房源</a>
		<ul class="drop-down-content">
			<li><a href="/Sell">中介出售</a></li>
			<li><a href="javascript:;">个人出售</a></li>
		</ul>
	</li>
	<li class="drop-down">
		<a href="javascript:;">出租房源</a>
		<ul class="drop-down-content">
			<li><a href="/Hire">中介出租</a></li>
			<li><a href="javascript:;">个人出租</a></li>
		</ul>
	</li>
	<li><a href="javascript:;">个人求购</a></li>
	<li><a href="javascript:;">个人求租</a></li>
	<li><a href="/Article2/index/articleclass_id/5">政策法规</a></li>
	<li><a href="#" target="_blank">签约备案</a></li>
	<li><a href="/Article2/index/articleclass_id/7">配套服务</a></li>
	<li><a href="/Article2/index/articleclass_id/8">下载中心</a></li>
	<li><a href="/user/reg">注册</a></li>
	<li><a href="/user/login">登录</a></li>
</ul>
.nav{
	list-style: none;
}
.nav>li{
	float: left;
}
.nav::after{
    content:"";
    display:block;
    clear:both;
}
.nav a{
	display: block;
	text-decoration: none;
	width: 100px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: white;
	background: #085AAD;
}
.nav a:hover{
	background: #034486;
}
.drop-down{
	position:relative;
}
.drop-down-content{
	position:absolute;
	padding:0px;
	display:none;
}
.drop-down-content a{
	border-top:1px solid #fff;
}
.drop-down:hover .drop-down-content{
	display:block;
	z-index: 9999;
}

image

posted on 2022-09-09 11:34  小馬過河﹎  阅读(23)  评论(0)    收藏  举报

导航