<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/fa/css/all.css" />
<style>
header::before,
header::after {
content: "";
clear: both;
display: table;
}
header {
font-size: 12px;
color: #999;
line-height: 30px;
border-bottom: #ddd solid 1px;
background-color: #e3e4e5;
}
.inner-wrapper {
width: 1190px;
margin: 0 auto;
}
.location {
float: left;
padding:0 10px;
}
.location:hover{
background-color: white;
}
.pull-down-list{
height:433px;
width:302px;
background-color: white;
display: none;
border:solid rgb(204,204,204) 1px;
position:absolute;
box-shadow:0 0 2px rgba(0,0,0,.2)
}
.location:hover > .pull-down-list{
display:block;
}
ul {
float: right;
}
ul li {
float: left;
color: #999;
text-decoration: none;
}
a {
color: #999;
text-decoration: none;
}
a:hover {
color: red;
}
.fa-map-marker-alt {
color: red;
}
.cutting-line {
height: 10px;
width: 1px;
background-color: #ccc;
float: left;
margin: 10px 12px;
}
#last{
margin-right:50px;
}
</style>
</head>
<body>
<header>
<div class="inner-wrapper">
<div class="location">
<a href="javascript:;">
<i class="fas fa-map-marker-alt" style="font-size: 14px"></i>广东
</a>
<div class="pull-down-list"></div>
</div>
<ul>
<li><a href="javascript:;">你好，请登录</a></li>
<li class="cutting-line"></li>
<li>
<a href="javascript:;" style="color: red">免费注册</a>
<li class="cutting-line"></li>
</li>
<li>
<a href="javascript:;">我的订单</a>
<li class="cutting-line"></li>
</li>
<li>
<a href="javascript:;"
>我的京东<i class="fas fa-angle-down"></i>
</a>
<li class="cutting-line"></li>
</li>
<li>
<a href="javascript:;">京东会员</a>
<li class="cutting-line"></li>
</li>
<li>
<a href="javascript:;" style="color: red"
>政企采购<i class="fas fa-angle-down"></i>
</a>
</li>
<li class="cutting-line"></li>
<li>客户服务<i class="fas fa-angle-down"></i></li>
<li class="cutting-line"></li>
<li>网站导航<i class="fas fa-angle-down"></i></li>
<li class="cutting-line"></li>
<li>手机京东</li>
<li class="cutting-line"></li>
<li>
<a id="last" href="javascript:;">网站无障碍</a>
</li>
</ul>
</div>
</header>
</body>
</html>
