平时我们看到的淘宝头部导航的二级下拉菜单是这个样子的。
但是有时我们写出来会是右边这种样子的，这里故意用了红色边框，是为了突出边框，便于观看。
那么怎样才能写出上面的效果，划过的时候让li底部没有红色边框呢？
下面教大家一种简单的方法
这是css结构，简单的写的
<body>
<ul>
<li><a href="#">客户服务</a>
<div class="level"></div>
</li>
<li><a href="#">客户服务</a></li>
</ul>
</body>下面是css样式*{
margin:0;
padding:0;
}
body{
background: #f6f6f6;
}
ul{
width:300px;
margin:0 auto;
margin-top:100px;
}
ul>li{
list-style: none;
width:100px;
position: relative;//把二级导航定位在li上
float:left; }
ul>li>a{
display: block;
height:30px;
width:100px;
background: gainsboro;
line-height: 30px;
text-align: center;
color:black;
text-decoration: none;
border:1px solid red;
/********下面是关键的2步********/
position:relative;
z-index: 1000;
}
.level{
position: absolute;
height:300px;
width:230px;
background: white;
border:1px solid red;
left:0;
top:31px;
}
li>a:hover{
background: white;
border-bottom: 1px solid white;
}
a变浅变成块状，width100px height:30px 有1px 的红色边框，
这样li的高度减变成了32px. 我们把二级导航的div定位在距离li顶部31px处，
这样li跟二级菜单就会有1px 的重合，正常情况下，二级导航.level是盖在li上面的，a是li内部的元素，
自然也就会被盖在下面，这是我们改变一下a的状态，让a标签position:relative.z-index值设为1000，只有比
二级导航的z-index高就行。这样a就会盖在最上面，
当划过a 的时候，让a的底部边框颜色变为白色，就可以了。
