本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写
以下效果:
放上代码
<style> .el-menu-demo{ height: 40px; /* border-bottom-color:none!important; */ background-color:rgba(0,0,0,0); float:right; margin-right: 8.54%; } /* 点击出来的下划线进行隐藏 */ .el-menu-item.is-active { border-bottom: none!important; color: rgba(0,0,0,0); } /* 整体的下划线进行隐藏 */ .el-menu.el-menu--horizontal{ border-bottom: none; } /* 导航栏的间距等样式 */ .el-menu-item { padding: 0 62px; font-size: 16px; } /* 点击出来的下划线动效残留进行隐藏 */ .el-menu--horizontal>.el-menu-item{ 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-color: rgba(0,0,0,0); } </style>