以下是自己所写代码与原网页的差别
解决办法
下滑框是根据网站导航的父级盒子所定位
即一个整体盒子里面有网站导航和下滑栏俩部分
只需要在网站导航这个盒子里相对定位并设置层级(比下滑栏部分层级高)即可
举个例子
原理 a标签盖住citys,而不是用父级盒子盖
<div class="top-nav-left">
<a href="#" class="city">
<i class="icon icon-coordinate"></i>
郑州
<span class="change-city">[切换]</span>
</a>
<div class="citys">
<div class="title clearfix">
<h2>热门城市</h2>
</div>
</div>
CSS样式
.top-nav-left .city {
padding: 0 11px 0 24px;
display: inline-block;
height: 35px;
line-height: 35px;
position: relative;
background-color: #f5f5f5;
z-index: 10;
}
.top-nav-left .citys {
position: absolute;
left: -1px;
top: 34px;
border: 1px solid #d8d8d8;
width: 406px;
z-index: 9;
background-color: #fff;
}