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,
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;
/* 为避免弹窗被其他元素盖住，设置⼀个较⾼的层级 */
/* 给边框添加阴影 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;
}
/* 定义向右浮动 */
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;
}
北京
你好，请登录
我的订单
我的京东
客户服务
⽹站导航
⼿机京东

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。