elementui菜单下拉样式修改

最新推荐文章于 2025-04-11 22:33:13 发布

记录一下前端笔记

最新推荐文章于 2025-04-11 22:33:13 发布

阅读量8.2k

点赞数

本文链接：https://blog.youkuaiyun.com/sinat_21389349/article/details/106695230

版权

公共样式里写

/*菜单*/
.el-menu--horizontal>.el-submenu .el-submenu__title{
  height: 33px;
  line-height: 33px;
  border: none;
  background-color: #289efc;
  border-radius: 3px;
}
.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
  background-color: #289efc;
  color: white;
}
.el-menu--horizontal>.el-submenu .el-submenu__title{
  color: white;
}
.el-menu-demo>.el-submenu>.el-submenu__title i{
  color: white;
}
.el-menu--popup-bottom-start{
  margin-top: 13px;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
  color: white;
}
.el-menu--horizontal .el-menu .el-menu-item{
  color: #333333;
  font-size: 12px;
}
.el-menu--popup {
  min-width: 160px;
}

组件样式里写

  /*菜单下拉框样式开始*/
  >>> .el-menu--horizontal>.el-submenu:focus .el-submenu__title{
    color: white;
  }
  .el-menu--popup-bottom-start .el-submenu >>> .el-submenu__title{
    color: #333333!important;
    font-size: 12px!important;
  }
  .el-menu--popup-bottom-start .el-submenu >>> .el-submenu__title:hover{
    background-color: #EAF5FF!important;
    color: #53B1FD!important;
  }
  .el-menu-item:hover{
    background-color: #EAF5FF!important;
    color: #53B1FD!important;
  }
  /*菜单下拉框样式结束*/