html京东下拉菜单设置,实现京东导航栏的下拉框

京东

/* 解决高度塌陷的问题 */

.clearfix::before,

.clearfix::after{

content: table;

clear:both;

}

body{

/* 设置字体以及字体的大小和行高 */

font: 12px/5.5 微软雅黑;

}

.top-bar-wrapper{

/* 设置盒子宽度 */

width: 100%;

/* 设置盒子高度 */

height: 30px;

/* 设置行高 */

line-height: 30px;

/* 设置背景颜色 */

background-color: #E3E4E5;

/* 设置边框样式 */

border-bottom: 1px #dddddd solid;

}

/* 设置字体的样式及颜色 */

.top-bar a,

.top-bar span,

.top-bar i{

color: #999;

text-decoration: none;

}

/* 设置导航栏的鼠标移入改变颜色的功能 */

.top-bar a:hover,

.top-bar a.color-a{

color: #f36162;

}

/* 设置内部容器的样式 */

.top-bar{

/* 固定宽度 */

width: 1190px;

/* 设置水平居中 */

margin: 0 auto;

/* 设置一个相对定位 */

position: relative;

}

/* 定义向左浮动 */

.location{

float: left;

}

/* 设置小图标的颜色 */

.location .fas{

color: #f10215;

}

/* 设置城市弹窗列表 */

.location .city-list{

/* 设置一个自动隐藏功能 */

display: none;

width: 320px;

height: 460px;

background-color: #fff8f8;

/* 表示边框线宽度 1像素，实心线，定义颜色 */

border: 1px solid #cccccc ;

/* 设置绝对定位，使其显示使不占用页面位置 */

position: absolute;

/* 这里设置作用是向上移动一个像素 */

top: 31px;

/* 为避免弹窗被其他元素盖住，设置一个较高的层级 */

z-index: 999;

/* 给边框添加阴影 x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色*/

box-shadow: 0 2px 2px rgb(0, 0 ,0, .2);

}

/* 当鼠标移入到location时，让city-list 元素显示出来 */

/* 注意，只有将 */

.location:hover .city-list{

display: block;

}

/* 增加一个鼠标移入后背景颜色改变的效果 */

.current-city{

/* 增加一个内边距效果 */

padding: 0 10px;

/* 设置一个相对定位 */

position: relative;

/* 新增一个层级 */

z-index: 99999;

}

/* 设置current-city 鼠标移入后的效果 */

.location:hover .current-city{

/* 设置背景颜色 */

background-color: #ffffff;

/* 设置边框颜色 */

border: 1px solid rgb(204, 204 ,204);

/* 描述下边框的样式及定义样式 */

border-bottom: none;

/*

padding-bottom 是指一个元素在内边距区域

(padding area)中下方的高度。内边距(padding)

是指一个元素的内容和边框之间的区域

*/

padding-bottom: 1px;

}

/* 定义向右浮动 */

.shortcut{

float: right;

}

/* 设置分割线的样式及颜色 */

.shortcut .line{

width: 1px;

height: 10px;

background-color: #cccccc;

/* 位置调整 */

margin: 10px 12px;

}

/* 定义li 向左浮动 */

.shortcut li{

float: left;

}

/* 调整图标图标的上下位置 */

.shortcut .fas{

margin: 10px 0 0 5px;

}