elementui更改导航栏样式

 

 本来是这样，有下划线有点击背景，但是业务需求不需要，就想办法进行隐藏，控制台可以观察效果找出相应的类进行格式书写

以下效果：

 

 放上代码

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