案例
实现下图效果:
html
<div class="wrapper">
<div class="shop_box">
<div class="shop_box_w">
<span class="car"></span>
<span class="shop_num">100</span>
<a href="#">我的购物车</a>
</div>
<div class="shop_menu"></div>
</div>
</div>
css
.wrapper{
width: 500px;
font-size: 12px;
}
.shop_box{
width: 132px;
height: 36px;
line-height: 36px;
border: 1px solid transparent;
position: relative;
float: right;
}
.shop_box a{
color: #e1251b;
text-decoration: none;
}
.shop_num{
background-color: #e1251b;
color: #fff;
min-width: 12px; /* 最小宽度,会根据内容调整宽度 */
display: inline-block;
padding: 1px 3px;
border-radius: 7px;
line-height: 12px;
font-size: 12px;
text-align: center;
position: relative;
top: -8px;
left: -5px;
}
/* 鼠标放到购物车的边框 */
.shop_box:hover{
border: 1px solid #c81623;
/* border-bottom: 1px solid #fff; */
border-bottom-color: transparent;
}
.shop_menu{
width: 310px;
height: 71px;
background-color: #fff;
position: absolute;
display: none;
border: 1px solid #c81623;
top:35px;
right: -1px;
}
.shop_box:hover .shop_menu{
display: block;
}
.shop_box_w{
background-color: #fff;
position: relative;
/* 在上面 */
z-index: 99;
}
.car{
width: 16px;
height: 36px;
display: inline-block;
background-image: url(img/car.png);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: 0 10px;
float: left;
margin-left: 15px;
}