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

页面中修改el-menu

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

 <el-menu
        class="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;
}