效果图
html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="./jd.css"><title>京东顶部导航栏</title></head><body><!-- 最底部背景条容器 --><div id="container"><!-- 导航栏容器 --><div class="nav"><!-- 左侧菜单项 --><ul class="fl"><li class="dq" ><a href="" class="city hover_red"><i class="fa fa-map-marker" aria-hidden="true" style="color: red;"></i><span>安徽</span></a><!-- 下拉菜单 --><div class="list"><div class="item"><a href="">北京</a></div><div class="item"><a href="">上海</a></div><div class="item"><a href="">天津</a></div><div class="item"><a href="">重庆</a></div><div class="item"><a href="">河北</a></div><div class="item"><a href="">山西</a></div><div class="item"><a href="">河南</a></div><div class="item"><a href="">辽宁</a></div><div class="item"><a href="">吉林</a></div><div class="item"><a href="">黑龙江</a></div><div class="item"><a href="">内蒙古</a></div><div class="item"><a href="">江苏</a></div><div class="item"><a href="">山东</a></div><div class="item"><a href="">安徽</a></div><div class="item"><a href="">浙江</a></div></div></li></ul><!-- 右侧菜单向容器 --><ul class="fr"><li><a href="" class="hover_red">你好,请登录</a> <a href="" style="color: red;">免费注册</a></li><li class="spacer"></li><li><a href=" " class="hover_red">我的订单</a></li><li class="spacer"></li><li class="wdjd"><div><a href="" class="hover_red">我的京东</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list"><div class="item1"><a href="">待处理订单</a></div><div class="item1"><a href="">我的问答</a></div><div class="item1"><a href="">返修退换货</a></div><div class="item1"><a href="">我的关注</a></div><div class="item1"><a href="">降价商品</a></div></div></li><li class="spacer"></li><li><a href="" class="hover_red">京东会员</a></li><li class="spacer"></li><li class="qycg"><div><a href="" style="color: red;">企业采购</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list1"><div class="item1"><a href="">待处理订单</a></div><div class="item1"><a href="">我的问答</a></div><div class="item1"><a href="">返修退换货</a></div><div class="item1"><a href="">我的关注</a></div><div class="item1"><a href="">降价商品</a></div></div></li><li class="spacer"></li><li class="qycg"><div><a href="">客户服务</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list1"><dd>客户</dd><dt><div class="item1"><a href="">帮助中心</a></div></dt><dt><div class="item1"><a href="">售后服务</a></div></dt><dt><div class="item1"><a href="">在线客服</a></div></dt><dt><div class="item1"><a href="">意见建议</a></div></dt><dt><div class="item1"><a href="">电话客服</a></div></dt></div></li><li class="spacer"></li><li class="wzdh"><div><a href="">网站导航</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list2"></div></li><li class="spacer"></li><li><div style="color: grey;">手机京东</div></li><li class="spacer"></li><li><a href="" class="hover_red">网站无障碍</a></li></ul></div></div></body></html>
css代码
jd.css
/* 去除a链接的下划线并将字体颜色设为灰色 */a{text-decoration: none;color: grey;}/* 去除列表默认样式 */ul{list-style: none;}/* 去除浏览器默认样式 */*{margin:0px;padding: 0px}/* 设置底层容器颜色及下边框 */#container{border-bottom: 1px solid #ddd;background-color: #e3e4e5;}/* 设置导航栏宽度、高度、行高、外边距 */.nav{width: 1190px;margin: auto;height: 30px;line-height: 30px;}/* 将左侧菜单容器左浮动 */.fl{float: left;}/* 设置菜单项参数，为是hover效果加边框时不发生抖动，提前设置边框并将颜色设为透明色 */.dq{padding-left:10px;padding-right: 5px;width: 60px;position: relative;text-align:-webkit-match-parent;border-top: 1px solid transparent;border-left: 1px solid transparent;border-right: 1px solid transparent;}/* 设置居中 */.city{text-align: center;line-height: 30px;}/* 城市、我的京东 的下拉边框，当鼠标未移入时隐藏 */.list{width: 300px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;}/* 企业采购、客户服务 的下拉边框，当鼠标未移入时隐藏 */.list1{width: 200px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;}/* 网站导航 的下拉边框，当鼠标未移入时隐藏 */.list2{width: 980px;height: 300px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;}/* 设置外边距 */.list1>.item1{margin:0px 10px;}/* 设置下拉菜单中元素参数 */.item{float: left;width: 60px;padding:2px 0 ;}/* 设置下拉菜单中元素参数 */.item1{float: left;width: 100px;padding:2px 0 ;}/* 当鼠标移入时显示下拉菜单 */.fl .dq:hover .list ,.fr .wdjd:hover .list,.fr .qycg:hover .list1,.fr .wzdh:hover .list2 {display: block;}/* 鼠标移入菜单时将边框显示出来，并设置背景色 */.fl .dq:hover ,.fr .wdjd:hover,.fr .qycg:hover ,.fr .wzdh:hover{border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;}/* 鼠标移入时字体变红 */a.hover_red:hover{color: red;}/* 右侧菜单容器向右浮动 */.fr{float: right;}/* 右侧容器内的元素左浮动 */.fr>li{float: left;}/* 设置右侧菜单之间的竖条 */.spacer{margin:11px 5px 0;width: 1px;height: 10px;background-color: #ccc;}/* 设置对应菜单参数 */.wdjd,.qycg,.wzdh{padding-left:10px;padding-right: 5px;position: relative;text-align:-webkit-match-parent;border-top: 1px solid transparent;border-left: 1px solid transparent;border-right: 1px solid transparent;}
