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

页面中修改el-menu

�index.php/tags-41973.html" >�置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;}