仿京东二级压边线菜单
页面及功能实现
hover之前
hover之后
思路
难点 — 压边线
将a标签加1px高度 然后再将把a显示在ul(对a position:relative z-index:1
因为 ul一开始定位了 它的元素层级在a上面 )上面从而达到这种压边线效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二级菜单--压边线实现</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.er1{
width: 188px;
height: 33px;
margin:100px auto;
position: relative;
}
.er1 a{
display:block;
width:188px;
height:34px; /* 重点 高度加1px; */
line-height:33px;
text-decoration: none;
color:#f10215;
text-align:center;
background-color: #fff;
border:1px solid #e3e4e5;
position: relative; /* 使a标签在ul上面 达到压边线效果 */
z-index: 1;
}
.er1 ul{
height: 49px;
padding: 10px 0;
text-align: center;
overflow: hidden;
color: #999;
border: 1px solid #ccc;
width:308px;
display:none;
position: absolute;
left:-120px;
top:34px;
}
.er1:hover ul{
display:block;
}
.er1:hover a{
border-color:#ccc;
border-bottom: none;
}
</style>
</head>
<body>
<div class="er1">
<a href="#">我的购物车</a>
<ul>
</ul>
</div>
</body>
</html>