el-menu弹出菜单样式不生效

07-21 419阅读

1. 使用 ruoyi 项目时出现的问题。

class=“container” 中的样式是这样的

 .container {
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
    float: left;
    height:  100%;
    width: 200px;
    background-color: transparent !important;
    overflow: hidden;
    -webkit-transition: width .28s;
    transition: width 0.28s;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    .svg-icon {
        margin-right: 10px;
        margin-left: 3px;
    }
    // menu hover
   .el-submenu__title {
        font-size: 17px;
        color: white !important;
        &:hover {
            background-color: transparent !important;
        }
    }
}

2. 问题描述

.svg-icon 这个样式只对一级菜单 “高速公路” 生效！二级菜单和其中的选项则不能生效！

2. 解决方法

html 文档中是没有弹出菜单项（出入口收费站 -> 总流量。。。）的。
他们在 html 文档的末尾可以看到

所以根据弹出菜单出现的位置设置样式就可以了！在 el-menu–popup这个样式的基础上作修改

.el-menu--popup {
    .el-submenu__title{
        background-color: #0B1423 !important;
        color: #FFF !important;
    }
    .el-menu-item{
        background-color: #0B1423 !important;
        color: #FFF !important;
    }
    .el-menu-item:hover {
        background-color: #FFF !important;
        color: #0B1423 !important;
    }
    .el-menu-item.is-active {
        background-color: #FFF !important;
        color: #0B1423 !important;
    }
    .svg-icon {
        margin-right: 10px;
        margin-left: 3px;
    }  
}