<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./source/fontImg/css/font-awesome.css" /> <style> body { font-size: 14px; } *{ margin:0px; padding: 0px; } /* 将list样式取消 */ li { list-style: none; } /* 设置外部容器 */ .top-bar-wrapper { width: 100%; height:30px; /* 设置行高 */ line-height: 30px; /* 设置底部边线 */ border-bottom: 1px solid #ddd; /* 设置背景颜色 */ background-color: #e3e4e5; } /* 设置内部容器 */ .top-bar { /* 设置固定宽度 */ width: 900px; /* 设置水平居中 */ margin: 0 auto; /* 开启相对定位 */ position: relative; } /* 解决float塌陷方案 */ .clearfix::after { content: ""; display: block; clear: both; } /* 设置左侧 */ .location { float: left; } /* 设置右侧浮动 */ .shortcut { float: right; } /* 设置右侧内容浮动 */ .shortcut li { float: left; } .top-bar a, .top-bar i, .top-bar span { color: #999; text-decoration: none; } /* 为地图图标设置颜色 */ .location .fa { color: #f01205; } /* 为超链接设置悬浮效果 */ .top-bar a:hover, .top-bar .heighlight { color: #f01205; } /* 分割线设置 */ .shortcut .line { width: 1px; height: 10px; background-color: #999; margin: 10px 12px; } /* 设置城市下拉列表的块元素 */ .location .city-list { display: none; width: 320px; height: 426px; background-color: white; border: 1px solid rgb(204, 204, 204); /* 脱离文档流 */ position:absolute; top:31px; /* 防止别的层级元素将其覆盖 */ z-index: 999; box-shadow: 0 2px 2px rgba(0,0,0,.3); } /* 设置元素悬浮效果 */ .location:hover .city-list{ display: block; } /* 设置内边距 */ .current-city{ padding: 0 10px; /* 为保持布局一致，不滑动 */ border: 1px solid transparent; border-bottom: none; } /* 设置悬浮效果 */ .location:hover .current-city{ background-color: white; border: 1px solid rgb(204, 204, 204); border-bottom: none; padding-bottom: 1px; /* 开启定位提高元素层级 */ position: relative; z-index: 9999; } /* 在我的订单下面设置块 */ .myIndent .indentblock{ display: none; width: 300px; height:300px; background-color:white; border: 1px solid rgb(204, 204, 204); box-shadow: 0 0 10px rgba(0,0,0,.3); position: absolute; top:30px; z-index: 99; } .myIndent:hover .indentblock{ display: block; } .myIndent .indent{ /* 为保持布局一致，不滑动 */ border: 1px solid transparent; padding:7px 10px; border-bottom: none; } .myIndent:hover .indent{ border:1px solid rgb(204, 204, 204); border-bottom: none; background-color: white; padding:7px 10px; position: relative; z-index: 9999; } </style> </head> <body> <!-- 外层容器 --> <div class="top-bar-wrapper"> <!-- 内层容器 --> <div class="top-bar clearfix"> <!-- 左侧菜单 --> <div class="location"> <li class="current-city"> <span class="fa fa-map-marker"></span> <a href="javascript:;">北京</a> </li> <div class="city-list"></div> </div> <!-- 右侧菜单-->
<ul class="shortcut clearfix"> <li> <a href="javascript:;">你好,请登录</a> <a href="javascript:;" class="heighlight">免费注册</a> </li> <!-- 分割线 --> <li class="line"></li> <li class="myIndent"> <a href="javascript:;" class="indent">我的订单</a> <div class="indentblock"></div> </li> <!-- 分割线 --> <li class="line"></li> <li> <a href="javascript:;" class="heighlight">我的京东</a> <i class="fa fa-angle-down"></i> </li> <!-- 分割线 --> <li class="line"></li> <li><a href="javascript:;">京东会员</a></li> <!-- 分割线 --> <li class="line"></li> <li> <a href="javascript:;">企业采购</a> <i class="fa fa-angle-down"></i> </li> </ul> </div> </div> </body> </html>
