.el-menu--horizontal { display: flex; .el-menu-item, .el-submenu__title { background-color: var(--app-color-black) !important; color: var(--app-color-white) !important; &:hover, &.is-active { background: #202027 !important; } } >.el-menu-item { height: 64px; &.is-active { background: #202027 !important; border-bottom: 4px solid var(--app-color-yellow); border-bottom-color: var(--app-color-yellow) !important; } } >.el-submenu { .el-submenu__title { height: 64px; } &.is-active, &.is-opened { .el-submenu__title { border-bottom: 4px solid var(--app-color-yellow); border-bottom-color: var(--app-color-yellow) !important; } } } .el-submenu__icon-arrow { display: none; } &.app-popper-menu { .el-menu--popup { padding: 0; .el-menu-item, .el-submenu__title { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--app-color-gray-250); border-bottom-color: var(--app-color-gray-250) !important; } } } } .el-menu--vertical { .el-menu-item, .el-submenu__title { height: 40px; line-height: 40px; // overflow: hidden; // white-space: nowrap; // text-overflow: ellipsis; color: var(--app-color-white); background-color: #001529; .fa, .el-submenu__icon-arrow { color: var(--app-color-white); } &:hover, &.is-active { background-color: var(--app-color-blue); } } .el-submenu { &.is-active { >.el-submenu__title { background-color: var(--app-color-blue); } } } }