就是这种效果
<div class="itemLi itemLiactive">
</div>
.itemLi{
text-decoration: none;
line-height: 52px;
list-style-type: none;
cursor: pointer;
display: inline-block;
max-width: 112px;
flex: 1;
height: 61px;
margin: 11px 10px 0 10px;
position: relative;
.bottombutton{
margin:0 auto;
display:inline-block;
font-size:16px;
width:100%;
height:52px;
line-height:56px;
text-align:center;
color: rgba(255, 255, 255, 0.4);
}
// background: rgba(0, 0, 0, 0);
// background-size: cover;
// background-repeat: no-repeat;
&:hover{
.bottombutton{
color: rgba(255, 255, 255, 1)!important;
}
background: linear-gradient(0deg, #FFf 2px, rgba(255, 255, 255, 0) 2px), linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 19px);
&::after{
content: '';
display: inline-block;
width: 0;
height: 0;
border-color: #266CFF transparent;
border-width: 0px 0px 31px 14px;
border-style: solid;
position: absolute;
right: 0;
bottom: 0px;
// position: absolute;
// bottom:-9px;
// right: calc(50% - 32px);
// width: 64px;
// height: 2px;
// content: '';
// background-color: #fff;
}
&::before{
position: absolute;
content: '';
display: inline-block;
width: 0;
height: 0;
border-color: #266CFF transparent;
border-width: 0px 14px 31px 0;
border-style: solid;
bottom: 0px;
}
}
.childlistUlbotton{
position: absolute;
top: 65px;
left: -18px;
text-align: left;
height: 0px;
background: #fff;
box-shadow: 0px 3px 6px rgba(0,0,0,0.18);
overflow: hidden;
transition: height .2s;
// margin-left: 170px;
.childitemLi{
text-decoration: none;
line-height: 52px;
list-style-type: none;
cursor: pointer;
display: inline-block;
width: 148px;
height: 52px;
.childbottombutton{
margin:0 auto;
display:inline-block;
font-size:16px;
width:100%;
height:52px;
line-height:56px;
text-align:center;
color: rgba(0,0,0);
}
&:hover{
.childbottombutton{
font-weight: bold;
color:#266CFF!important;
}
}
}
.childitemLiactive{
font-weight: bold;
color: #266CFF;
}
}
}