导航条下拉菜单

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="icon" type="image/x-icon" href="https://www.jd.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="https://www.jd.com/favicon.ico">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<title>京东顶部导航条</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.header{
			width: 100%;
			height: 30px;
			background: #E3E4E5;
			text-align: center;
			line-height: 30px;
			position: relative
		}
		.clear{clear: both;}
		a{text-decoration: none;}
		li{list-style: none;}
		.header_1{			
			height: 30px;
			float: left;
			position: absolute; top: 0px;left: 540px;
			font-size: 13px;
			color: #999999;
		}
		.header_1 li{margin-left: 10px;padding: 0px 10px;}
		.header_2{			
			height: 30px;
			position: absolute; top: 0px;right: 380px;
		}
		.header_2 li{
			color: #999999;	
			float: left;
			font-size: 13px;
			padding: 0px 2px;	
		}
		.header_2 li span{color: #999999;}
		.header_2 li span:hover{color: #F10215;}
		.header ul .bg:hover{background: #fff;}
		.bg ul{display: none;position: absolute; width: 280px;height: 160px;border: 1px solid #F5F5F5;}
		.bg ul li{margin-right: 50px;font-size: 13px;padding: 0 5px;width: 80px;text-align: left;}
		.bg:hover ul{display: block;}
		.bg ul li:hover{color:red;}
	</style>
</head>
<body>
	<div class="header">
		<ul class="header_1">
			<li class="bg"><i class="fa fa-map-marker" style="color: red;font-size: 16px;margin-right: 3px;"></i><span>北京</span></li>
		</ul>
		<ul class="header_2">
			<li><a href=""><span>你好,请登录&nbsp;</span></a></li>
			<li><a href=""><span style="color: #F10215">免费注册&nbsp;</span></a></li>
			<li>|</li>
			<li><a href=""><span>&nbsp;我的订单&nbsp;</span></a></li>
			<li>|</li>
			<li class="bg"><a href="">
				<span>&nbsp;我的京东
					<ul>
						<a href=""><li>待处理订单</li></a>
						<a href=""><li>消息</li></a>
						<a href=""><li>返修退换货</li></a>
						<a href=""><li>我的问答</li></a>
						<a href=""><li>降价商品</li></a>
						<a href=""><li>我的关注</li></a>
						<a href=""><li>我的京豆</li></a>
						<a href=""><li>我的优惠券</li></a>
						<a href=""><li>我的白条</li></a>
						<a href=""><li>我的理财</li></a>
					</ul>
				</span></a><i class="fa fa-angle-down"></i>&nbsp;
			</li>
			<li>|</li>
			<li><a href=""><span>&nbsp;京东会员&nbsp;</span></a></li>
			<li>|</li>
			<li class="bg"><a href=""><span style="color: #F10215">&nbsp;企业采购</span></a><i class="fa fa-angle-down"></i>&nbsp;</li>
			<li>|</li>
			<li class="bg">&nbsp;客户服务<i class="fa fa-angle-down"></i>&nbsp;</li>
			<li>|</li>
			<li class="bg">&nbsp;网站导航<i class="fa fa-angle-down"></i>&nbsp;</li>
			<li>|</li>
			<li class="bg">&nbsp;手机京东&nbsp;</i></li>
		</ul>
	</div>
	<div class="clear"></div>
</body>
</html>

QQ截图20190509153025.jpg

Correcting teacher：查无此人Correction time：2019-05-10 13:57:06
Teacher's summary：完成的不错，css写的好，页面效果就好。继续加油。

导航条下拉菜单

Popular Entries