4.2CSS3下拉菜单效果实现：

摘要：4.2CSS3下拉菜单效果实现： .nav_right_a ul{display: none;}实现隐藏，.nav_right_a:hover ul{display: block;}利用伪类hover来实现显示菜单！用到了相对定位和绝对定位！<!DOCTYPE html> <html> <head> <meta

4.2CSS3下拉菜单效果实现：

.nav_right_a ul{display: none;}实现隐藏，.nav_right_a:hover ul{display: block;}利用伪类hover来实现显示菜单！用到了相对定位和绝对定位！

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>下拉菜单</title>
	<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"">
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		a{height: 35px; font-size: 13px;text-align: center;line-height: 35px;text-decoration: none;color: #6C6C6C;}
		.cont{background-color: #F5F5F5;height:35px;}
		.cont_nav{width:60%;height: 35px;margin: 0px auto;}
		.nav_left{height: 35px;float: left;}
		a:hover{color: #FF5000;}
		.nav_right_a{display: inline-block;width: 90px;height: 35px;}
		.nav_right_a:hover{background-color:#ffffff}

		.nav_right{height: 35px;float: right;position:relative;}
		.nav_right_a ul li{height: 35px;line-height: 35px;text-align: left;padding: 0px 5px;color: #6C6C6C;}
		.nav_right_a ul li:hover{background-color:#F5F5F5;}
		.nav_right_a ul{ list-style: none; border: 1px solid #F5F5F5;border-top: none; display: none;position: absolute;padding: 5px 0px; }
		.nav_right_a:hover ul{display: block;}
	</style>
</head>
<body>
	<div class="cont">
		<div class="cont_nav">
			<div class="nav_left">
				<a href="#">中国大陆<i class="fa fa-angle-down "></i></a>
				<a href="#">&nbsp;&nbsp;亲,请登录</a>
				<a href="#">&nbsp;免费注册</a>
				<a href="#">&nbsp;&nbsp;手机逛淘宝</a>
			</div>
			<div class="nav_right">
				<a href="#" class="nav_right_a">我的淘宝
					<i class="fa fa-angle-down "></i>
						<ul>
							<li>已买到的宝贝</li>
							<li>我的足迹</li>
						</ul>
				</a>
				<a href="#">&nbsp;购物车</a>
				<a href="#" class="nav_right_a"> <i class="fa fa-star"></i> 收藏夹<i class="fa fa-angle-down "></i>
					<ul>
							<li>收藏的宝贝</li>
							<li>收藏的店铺</li>
						</ul>
				</a>
				<a href="#">商品分类</a>
				<a href="#" class="nav_right_a">卖家中心<i class="fa fa-angle-down "></i>
					<ul>
							<li>免费开店</li>
							<li>已卖出的宝贝</li>
							<li>出售中的宝贝</li>
							<li>卖家服务市场</li>
							<li>卖家培训中心</li>
							<li>体验	中心</li>
							<li>问商友</li>
						</ul>
				</a>
				<a href="#" class="nav_right_a">联系客服<i class="fa fa-angle-down "></i>
					<ul>
							<li>消费者客服</li>
							<li>卖家客服</li>
						</ul>
				</a>
				<a href="#" class="nav_right_a">网站导航<i class="fa fa-angle-down "></i></a>
			</div>
		</div>
	</div>
</body>
</html>

做的时候有点迷茫，下拉的菜单没有做到跳转的功能！（也就是没有下拉的菜单和上面的a链接是一体的！）如果要做到分开跳转的话我有点晕！然后如果被隐藏的部分不再a标签内部能否用hover来实现放在a标签上显示被隐藏的部分！（也就是ul和a标签如果是在同一个标签内部的话！能否实现！）

批改老师：天蓬老师批改时间：2018-12-27 17:04:45
老师总结：nav_right_a, 推荐写成: nav-right-a

4.2CSS3下拉菜单效果实现：

热门词条