element UI NavMenu 导航菜单样式修改

本文介绍了如何修改Element UI的菜单组件,使其hover效果更优雅,包括设置透明背景、移除下拉三角标记,并隐藏激活子菜单的下划线。适合前端开发者关注细节的美化工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值