【修改el-menu主菜单和子菜单悬浮的背景色】

孙熠彤
2023-12-01

背景颜色

/deep/.el-menu .el-menu-item:hover{
    outline: 0 !important;
    color: #2E95FB !important;
    background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}
/deep/.el-menu .el-menu-item.is-active {
    color: #2E95FB !important;
    background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}
.el-submenu /deep/.el-submenu__title:hover {
  color: #2E95FB !important;
  background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}

element-ui中如何去掉el-menu菜单栏中下划线
导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu
还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

 <el-menu 
 :default-active="activeIndex" 
 class="el-menu-demo" 
 mode="horizontal" @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="red">
 </el-menu>
.el-menu--horizontal > .el-menu-item {
   50%;
  border-bottom: none;
  height: 1rem;
  line-height: 0.5rem;
  text-align: center;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
}
 类似资料: