京东上方导航条的基本样式

//线上字体图标库
<link
  rel="stylesheet"
  href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"
/>
//线上样式重置表
<link
  rel="stylesheet"
  href="https://huruqing.gitee.io/demos/source/reset.css"
/>
<style>
  body {
    font-size: 14px;
  }
</style>
<div class="top-bar-wrapper">
  <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="shortcut">
      <li>
        <a href="javascript:;">你好,请登录</a>
        <a href="javascript:;" class="highlight">免费注册</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">我的订单</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">我的京东</a>
        <i class="fa fa-chevron-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;">京东会员</a>
      </li>
      <li class="line"></li>
      <li>
        <a href="javascript:;" class="highlight">企业采购</a>
        <i class="fa fa-chevron-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <span>客户服务</span>
      </li>
      <li class="line"></li>
      <li>
        <span>网站导航</span>
        <i class="fa fa-chevron-down"></i>
      </li>
      <li class="line"></li>
      <li>
        <span>手机京东</span>
      </li>
    </ul>
  </div>
</div>

.top-bar-wrapper {
  background: #ddd;
  line-height: 30px;
  width: 100%;
  min-width: 1180px;
}

.top-bar {
  width: 85%;
  margin: 0 auto;
}

.top-bar > ul {
  list-style: none;
}

.location {
  float: left;
}

.city-list {
  width: 320px;
  height: 206px;
  border: 1px solid rgb(204, 204, 204);
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  position: absolute;
  display: none;
  z-index: 999;
  top: 30px;
}

.current-city {
  padding: 0 10px;
  border: 1px solid transparent;
  border-bottom: none;
  padding-bottom: 1px;
  position: relative;
  z-index: 1000;
}

.location:hover .current-city {
  background: #fff;
  border: 1px solid rgb(204, 204, 204);
  border-bottom: none;
}

.location:hover .city-list {
  display: block;
}

.shortcut {
  float: right;
}
.shortcut li {
  float: left;
}
.shortcut .line {
  width: 1px;
  height: 20px;
  background: #999;
  margin: 5px 14px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.fa-map-marker {
  color: red;
}

a,
.fa-chevron-down,
span {
  text-decoration: none;
  color: #999;
}

a:hover,
a.highlight {
  color: red;
}