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

页面中修改el-menu

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

 
        
          
          菜单1
        
        
          
            
            菜单2
          
          子菜单1
          子菜单2
          子菜单3
        
        
          
          菜单3
        
        
          
            
            菜单4
          
          子菜单
        
        
          
          菜单5
        
        
          
            
            菜单6
          
          
          
          
        
        
          
          菜单7
        
      

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

   :deep(.el-menu) {
    .el-menu-item {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
    }
    img {
      margin-right: 4px;
    }
    .el-submenu__title {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
      i {
        color: #ffffff;
        font-weight: bold;
        margin-left: 3px;
      }
    }
    .el-submenu__title:hover,
    .el-submenu.is-active {
      background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
      background-color: transparent;
      border-bottom-color: #4beed4 !important;
      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);
    }
  }

全局样式中添加样式，因为子菜单的dom是插入body下面的

/* menu子菜单区域 */
.el-menu--popup {
  /* 菜单偏上一点 */
  margin-top: -8px !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: 0 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;
}