用css知识设置简易的京东导航条

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.clearfix::before
.clearfix::after{
    content:'';
    display: table;
    clear: both;
}
body{
    font-size: 12px;
    line-height: 1.5;
    
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
    width: 100%;
    height: 30px;
    background-color: rgb(227, 228, 229);
    /* 设置下边框 */
    border-bottom: 1px rgb(221, 221, 221) solid;
    /* 设置行高，没有设置高度，使文字居中 */
    line-height: 30px;
    
}
.top-bar{
    /* 固定宽度 */
    width: 1190px;
    /* 设置居中 */
    margin: 0 auto;
    position: relative;
   
}
/* 设置字体颜色 */
.top-bar a,
.top-bar span,
.top-bar i{
    color: #999;
    
}
/* 设置鼠标移入颜色 */
.top-bar a:hover{
    color:#f10215 ;
}
/* 设置原有的红色 */
.top-bar a.z1{
    color:#f10215 ;
}
/* 设置小图标 */
.location .iconfont{
    color: #f10215;
    
    
}
/* 设置左浮动 */
.location{
    float: left;
    color:rgb(168, 169, 169);
    
}
/* 设置城市列表的效果 */
.location .city-list{
    width: 320px;
    height: 436px;
    background-color: white;
    border: 1px solid rgb(204, 204,204);
    display: none;
    /* 设置绝对定位，让其不去占据页面 */
    position: absolute;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    top: 31px;
}
/* 当鼠标移入到location时，让city-list出现 */
.location:hover .city-list{
    display: block;
}
.current-city{
    padding: 0 10px;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    z-index: 1;
   
    
}
/* 设置current-city的移入的效果 */
.location:hover .current-city{
    background-color: white;
    border: 1px solid rgb(204, 204,204);
    border-bottom: none;
    /* padding-bottom: 1px; */
}

.myjd .myjd-list{
    width: 283px;
    height: 162px;
    border: 1px solid rgb(204, 204,204);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    display: none;
    position: absolute;
    top: 31px;
}
.myjd:hover .myjd-list{
    display: block;
}
.myjd:hover .myjd-name{
    background-color: white;
    border: 1px solid rgb(204, 204,204);
    border-bottom: none;
}
.myjd-name{
    padding: 0 6px;
    padding-bottom: 1px;
    position: relative;
    z-index: 2;
    border: 1px solid transparent;
    border-bottom: none;
}

.qycg-list{
    width: 158px;
    height: 144px;
    border: 1px solid rgb(204, 204,204);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    top: 31px;
    
}
.qycg:hover .qycg-list{
    display: block;
 
}
.qycg:hover .qycg-name{
    background-color: white;
    border: 1px solid rgb(204, 204,204);
    
    border-bottom: none;

}
.qycg .qycg-name{
    border: 1px solid transparent;
    border-bottom: none;
    padding-bottom: 1px;
    position: relative;
    z-index: 1;
}
.khfw-list{
    width: 172px;
    height: 245px;
    border: 1px solid rgb(204, 204, 204);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    display: none;
    top: 31px;
}
.khfw:hover .khfw-list{
    display: block;
}
.khfw:hover .khfw-name{
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    border-bottom: none;
    
}
.khfw .khfw-name{
    border: 1px solid transparent;
    border-bottom: none;
    padding-bottom: 1px;
    position: relative;
    z-index: 3;

}
/* .wzdh-list{
    width: 1188px;
    height: 182px;
    border: 1px solid rgb(204, 204, 204);
    position: absolute;

} */

.shortcut{
    width: 717px;
    height: 30px;
    float: right;  
}
.shortcut .line{
    width: 1px;
    height: 10px;
    background-color: rgb(168, 169, 169);
    margin: 12px 12px 0;

}
.shortcut .iconfont{
    font-size: 12px;
    line-height: 1.5;
}
/* 设置左侧内容的浮动 */
.shortcut li{
    float: left;
}