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

设置el-menubackground-color="transparent"

menu菜单透明，则背景图片能正常显示

<template>
  <div class="page">
    <div class="page_header">
      <div class="page_header_left">
        <img :src="require('~@assets/imgs/logo.png')" />
        <p class="page_heade_title">菜单区域</p>
      </div>
      <el-menu
        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>
    </div>
  </div>
</template>

设置菜单和悬浮二级子菜单的样式

<style scoped lang="scss">
.page {
  min-width: 1920px;
}
.page_header {
  height: 60px;
  display: flex;
  align-items: center;
  background-image: url('~@assets/imgs/home_header_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  .page_header_left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    .page_heade_title {
      font-size: 26px;
      color: #ffffff;
      font-weight: bold;
      margin-left: 5px;
      letter-spacing: 3px;
      filter: drop-shadow(0.5px 2.866px 0px rgba(2, 138, 137, 0.65));
    }
  }

  :deep(.el-menu) {
    margin: 0 auto;
    .el-menu-item {
      height: 60px;
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
    }
    .el-submenu {
      height: 60px;
    }
    img {
      margin-right: 4px;
    }
    .el-submenu__title {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
      border-bottom: 0px;
      i {
        color: #ffffff;
        font-weight: bold;
        margin-left: 3px;
      }
    }

    .el-submenu__title:hover,
    .el-submenu.is-active,
    .el-menu-item.is-active {
      background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
      background-color: transparent;
      border-bottom-color: #4beed4 !important;
      border-bottom: 2px solid #4beed4;
    }
    .el-submenu.is-active {
      .el-submenu__title {
        border-bottom: 2px solid #4beed4;
      }
    }
    .el-menu-item:not(.is-disabled):hover,
    .el-menu-item:not(.is-disabled):focus {
      background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
      border-bottom-color: #4beed4 !important;
    }
  }
}
</style>
<style>
/* 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;
}
</style>