html:

    1. <!DOCTYPE html>
    2. <html lang="ch">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>京东顶部导航条</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/84京东顶部导航条-结构.css">
    9.     <link rel="stylesheet" href="../fa/css/all.css">
    11. </head>
    12. <body>
    13.     <div class="top-line-bar clearfix">
    14.         <div class="top-bar">
    15.             <div class="location">
    16.                 <div class="city">
    17.                     <div class="fas fa-map-marked-alt"></div>
    18.                     <a href="javascript:;">陕西</a>
    19.                     <i class="fas fa-angle-down"></i>
    20.                 </div>
    21.                 <div class="location-list"></div>
    22.             </div>
    25.             <ul class="top-bar-right">
    26.                 <li>
    27.                     <a href="javascript:;">你好，请登录 </a>
    28.                     &nbsp;
    29.                 </li>
    30.                 <li>
    31.                     <a href="javascript:;">免费注册</a>
    32.                 </li>
    34.                 <li class="line-space"></li>
    36.                 <li>
    37.                     <a href="javascript:;">我的订单</a>    
    38.                 </li>
    39.                 <li class="line-space"></li>
    41.                 <li>
    42.                     <a href="javascript:;">我的京东</a>
    43.                     <i class="fas fa-angle-down"></i>   
    44.                 </li>
    45.                 <li class="line-space"></li>
    47.                 <li>
    48.                     <a href="javascript:;">京东会员</a>   
    49.                 </li>
    50.                 <li class="line-space"></li>
    52.                 <li>
    53.                     <a href="javascript:;">企业采购</a>
    54.                     <i class="fas fa-angle-down"></i>   
    55.                 </li>
    56.                 <li class="line-space"></li>
    58.                 <li>
    59.                     <i>客户服务</i>
    60.                     <i class="fas fa-angle-down"></i>  
    61.                 </li>
    62.                 <li class="line-space"></li>
    64.                 <li>
    65.                     <i>网站导航</i>
    66.                     <i class="fas fa-angle-down"></i>  
    67.                 </li>
    68.                 <li class="line-space"></li>
    70.                 <li>
    71.                     <i>手机京东</i> 
    72.                 </li>
    74.             </ul>
    75.         </div>
    77.     </div>
    78. </body>
    79. </html>

    css:
    （1） 当左右块元素设置为float之后，意外发现location-list把右边float顶下去了，此时采用将location-list设置为
    position: absolute;也脱离文档流，来避免此种情况
    （2）阴影设置box-shadow:x x x rgba; 前两个为x和y的位置，第三个为border-radius的程度
    （3）设置location-list,为display:none;
    （4）通过location: hover {} 唤出location-list,采用display: block;即可出现
    （5）活用z-index;来获得想要的层次

    body {
    font-size: 12px;
}

.top-line-bar {
    width: 100%;
    color: #E3E4E5;
    border: 1px solid red;
    background-color: #E3E4E5;
}

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

.line-space {
    width: 1px;
    height: 10px;
    background-color:#CCCCCC;
    margin: 10px 12px;
}

.location {
    float: left;
    line-height: 30px;
    font-size: 12px;
}

.location-list {
    width: 322px;
    height: 464px;
    position: absolute;
    top: 31px;
    background-color: red;
    box-shadow: 1px 2px 1px rgba(0,0,0,.1);
    display: none;
    border: 1px solid #CCCCCC;
}

.location:hover .city {
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #fff;
    z-index: 100;
}

.location:hover .location-list {
    display: block;
    background-color: #fff;
    z-index: 99;

}

.location .fas.fa-map-marked-alt {
    color:#F10215;
}

.top-bar-right {
    float: right;
}

a {
    line-height: 30px;
    text-decoration: none;
    color: #999999;
}

a:hover {
    color: #F10215;
}

.top-bar-right li {
    float: left;
}

li .fas.fa-angle-down {
    color: #9B9B9B;
    font-size: 1px;
    margin: 0 0 0 10px;
}

ul>li:nth-child(2)>a {
    color:#F10215;
}

ul>li:nth-child(10)>a {
    color:#F10215;
}

li>i:first-child {
    line-height: 30px;
    color: #999999;
}

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

    image.png