1、html
<html>
<div className="Menuoptions">
<ul>
<li className={"123" === "123" ? "LiHighlight" : ""} title="吃">
<div className="Menuoptions_li_img"><img src={item.img} alt="" /></div>
<div className="Menuoptions_li_name">吃</div>
</li>
<li className={"124" === "123" ? "LiHighlight" : ""} title="喝"}>
<div className="Menuoptions_li_img"><img src={item.img} alt="" /></div>
<div className="Menuoptions_li_name">喝</div>
</li>
</ul>
</div>
<html/>
2、css
.Menuoptions {
height: 60px;
background: #ffffff;
display: inline-block;
}
.Menuoptions ul {
overflow: hidden;
display: inline-block;
}
.Menuoptions ul li {
width: 80px;
height: 60px;
line-height: 1;
color: #D4DDE7;
float: left;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none
}
.Menuoptions ul li:hover {
background: #BBDEFB;
}
.Menuoptions .LiHighlight {
background: unset !important;
border-bottom: 3px solid #3385ff;
}
.Menuoptions_li_img {
margin-bottom: 3px;
}
.Menuoptions_li_img img {
width: 26px;
height: 26px;
}
.Menuoptions_li_name {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
}
3、效果
![dbc1f00d6eb2e36fbb54e441514b4c89.png](https://i-blog.csdnimg.cn/blog_migrate/25a622f65d7c5dc3117f52d33095c6b0.png)