京东头部导航效果

<!DOCTYPE html>
<html lang="zh">javascript

<head>
<meta charset="UTF-8">
<title>导航条</title>
<link rel="stylesheet" href="css/reset.css">

<link rel="stylesheet" href="fa/css/all.css">
<style>
.top-bar-wapper {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #e3e4e5;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border-bottom: 1px solid #ddd;
}css

.clearfix::before,
.clearfi::after {
content: '';
display: table;
clear: both;
}html

.top-bar {
width: 1190px;
height: 30px;
margin: 0 auto;java

}app

.top-bar .location {
float: left;
height: 100%;
line-height: 30px;
}字体

.location .current-city {
position: relative;
z-index: 10;
}网站

.top-bar .location:hover .current-city {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #e3e4e5;
}spa

.top-bar .location:hover .city-list {htm

display: block;
}ip

.location a,
.short-cut a,
.short-cut span,
.short-cut i {
color: #999;
}

.current-city {
padding: 0 5px;
}

.current-city .fa-map-marker {

font-size: 14px;
color: #f10215;
}

/* 设置城市列表弹出层 */
.city-list {
position: absolute;
width: 296px;
height: 400px;
border: 1px solid #e3e4e5;
border-top: none;
top: 30px;
z-index: 3;
display: none;
/* 设置阴影 */
box-shadow: 1px 0 1px rgba(0, 0, 0, .1);
}

.short-cut {
line-height: 30px;
float: right;
}

.short-cut li {
float: left;
margin: 0 9px;
}

.short-cut .short-speail,
a:hover {
color: #f10215;
}

.line {
display: inline-block;
width: 1px;
height: 10px;
background-color: #999;
}
</style>
</head>

<div class="top-bar clearfix">

<div class="location">
<div class="current-city">
<i class="fa fa-map-marker"></i>
<a href="javascript:;">北京</a>
</div>

<div class="city-list"></div>
</div>

<ul class="short-cut">
<li>
<a href="javascrript:;">你好，请登陆</a>
<a class="short-speail" href="javascrript:;">免费注册</a>
</li>
<li><i class="line"></i></li>
<li> <a href="javascrript:;">个人订单</a></li>
<li><i class="line"></i></li>
<li> <a href="javascrript:;">个人京东</a><i class="fa fa-angle-down"></i></li>
<li><i class="line"></i></li>
<li> <a href="javascrript:;">京东会员</a></li>
<li><i class="line"></i></li>
<li> <a class="short-speail" href="javascrript:;">企业采购</a><i class="fa fa-angle-down"></i></li>
<li><i class="line"></i></li>
<li> <span>客户服务</span><i class="fa fa-angle-down"></i></li>
<li><i class="line"></i></li>
<li> <span>网站导航</span><i class="fa fa-angle-down"></i></li>
<li><i class="line"></i></li>
<li> <span>手机京东</span></li>
</ul>
</div>

</div>
</body>

</html>