element UI NavMenu 导航菜单样式修改

姜森
2023-12-01

.el-menu {

  background-color: rgba(165, 42, 42, 0);

}

.el-menu.el-menu--horizontal {

  border: none;

}

/* hover颜色改变 */

>>> .el-menu--horizontal > .el-submenu .el-submenu__title:hover {

  background: transparent;

  color: #d75b5f;

}

.el-menu--horizontal > .el-menu-item.is-active {

  border-bottom: none;

}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,

.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,

.el-menu--horizontal > .el-submenu .el-submenu__title:hover {

  background: transparent;

  color: #d75b5f;

}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {

  color: #d75b5f;

}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {

  border-bottom: none;

}

/* 点击出来的submenu下划线进行隐藏 */

::v-deep .el-submenu.is-active .el-submenu__title {

  border-bottom: #ebeef5 !important;

}

/* 消除下拉三角 */

>>> .el-icon-arrow-down:before {

  content: none;

}

 类似资料: