1.目标图:
2.实现代码:
<style>
#box1{
width: 240px;
margin: auto;
margin-top: 100px;
display: flex;
flex-direction: row;
}
.son1{
border: 1px solid lightgrey;
background-color: lightpink;
text-align: center;
width: 80px;
height: 35px;
line-height: 35px;
overflow: hidden;
}
.son2{
border: 1px solid lightgrey;
background-color: rgb(247, 159, 127);
text-align: center;
width: 180px;
height: 60px;
line-height: 35px;
position: relative;
top: -36px;
left: 80px;
}
#b1:hover{
overflow: visible;
background-color: mediumturquoise;
color: white;
z-index: 999;
cursor: pointer;
}
.son1:hover,.son2:hover{
background-color: mediumturquoise;
cursor: pointer;
}
#b1-1:hover{
overflow: visible;
background-color: mediumturquoise;
z-index: 999;
cursor: pointer;
}
</style>
<body>
<div id="box1">
<div id="b1-1" class="son1">
手机
<div>
<div id="b1-1-1" class="son2"><img src="https://img0.baidu.com/it/u=2751713341,4226842008&fm=253&fmt=auto&app=138&f=JPEG?w=803&h=500" alt="" width="60px;" height="57px"/>Mate系列</div>
<div id="b1-1-1" class="son2"><img src="https://download-c-retail.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/p60/images/design/huawei-p60-id.png" alt="" width="60px" height="57px"/>P系列</div>
<div id="b1-1-1" class="son2"><img src="https://p3.toutiaoimg.com/tos-cn-i-qvj2lq49k0/649d95da409542ffa7eddba8f456a828~tplv-tt-large.image" alt="" width="60px" height="57px"/>Pocket系列</div>
<div id="b1-1-1" class="son2"><img src="https://img2.baidu.com/it/u=616438917,1999920684&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500" alt="" width="60px" height="57px"/>nova系列</div>
<div id="b1-1-1" class="son2"><img src="https://img2.baidu.com/it/u=3803097368,2975783155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" width="60px" height="57px"/>华为畅享系列</div>
</div>
</body>
3.成果展示: