覆盖element-ui的el-menu样式记录：背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

在这里插入图片描述

页面中修改el-menu

设置background-color="transparent"，menu菜单下的背景图片则能正常显示了

 <el-menuclass="el-menu-demo"mode="horizontal"background-color="transparent"><el-menu-item index="1"><img :src="require('~@assets/imgs/menu_logo_1.png')" />菜单1</el-menu-item><el-submenu index="2"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_2.png')" />菜单2</template><el-menu-item index="2-1">子菜单1</el-menu-item><el-menu-item index="2-2">子菜单2</el-menu-item><el-menu-item index="2-3">子菜单3</el-menu-item></el-submenu><el-menu-item index="3"><img :src="require('~@assets/imgs/menu_logo_3.png')" />菜单3</el-menu-item><el-submenu index="4"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_4.png')" />菜单4</template><el-menu-item index="3-1">子菜单</el-menu-item></el-submenu><el-menu-item index="5"><img :src="require('~@assets/imgs/menu_logo_5.png')" />菜单5</el-menu-item><el-submenu index="6"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_6.png')" />菜单6</template><el-menu-item index="6-1"></el-menu-item><el-menu-item index="6-2"></el-menu-item><el-menu-item index="6-3"></el-menu-item></el-submenu><el-menu-item index="7"><img :src="require('~@assets/imgs/menu_logo_7.png')" />菜单7</el-menu-item></el-menu>

页面中加了scoped，使用穿透样式修改el-menu样式

/* menu子菜单区域 */
.el-menu--popup {/* 菜单偏上一点 */margin-top: 18px !important;border-radius: 6px !important;background-image: linear-gradient(0deg, #eafefc 0%, #a8e9e2 100%);padding: 10px 0px !important;.el-menu-item {color: #333333 !important;background-color: transparent !important;margin: 5px 10px;border-radius: 4px;transition-duration: 0s;}.el-menu-item:hover {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}.el-menu-item.is-active {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}
}/* menu子菜单区域添加箭头 */
.el-menu--popup.el-menu--popup-bottom-start::before {content: '';position: absolute;top: -15px; /* 控制箭头的位置 */left: 50%;transform: translateX(-50%);border-width: 8px;border-style: solid;border-color: transparent transparent #a7e9e1 transparent;
}