html - 如何更改 MetisMenu 下拉菜单的背景颜色和设置边距？

Question

我目前正在尝试使用 MetisMenu 制作下拉菜单 https://github.com/onokumus/metisMenu .

这是我到目前为止所拥有的(它是一个动画 .gif)。

如您所见，当我将鼠标悬停在选定的下拉菜单上时，会出现一个蓝色背景。我怎样才能删除它？这是 Bootstrap 还是 MetisMenu 问题？

另一件事是我怎样才能使打开的下拉菜单 aria-expanded="true" 在关闭时具有相同的外观 aria-expanded="false"?

这里(检查菜单 2.3)是打开下拉菜单时的内容。

这里(检查菜单 2.3)是我想要的，但这是下拉菜单关闭的时候。

我希望在关闭或打开下拉菜单时保持与关闭时完全相同的样式。

这是我的代码。

.container-fluid, .row{
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.ntg-container{
    box-sizing: border-box;
    margin: 0 !important;
}
.ntg-container-fill{
    height: 100%;
    margin: 0 !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 65px !important;
}
.ntg-div-background{
    background: #F8F8F8;
}
body, html{
    background: #222034 !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
li, ul{
    background-color: #F8F8F8;
    background: #F8F8F8;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.list-group-item{
    color: #000000;
}
li.list-group-item.active{
    background: #F8F8F8;
    margin: 0;
}
li.hover{
    background: red;
}
<ul class="list-group metismenu" id="menu">
    <li class="active list-group-item">
        <a href="#" aria-expanded="true">Menu 1.</a>
        <ul class="list-group">
            <li class="list-group-item">Menu 1.1.</li>
            <li class="list-group-item">Menu 1.2.</li>
            <li class="list-group-item">Menu 1.3.</li>
        </ul>
    </li>
    <li class="list-group list-group-item">
        <a href="#" aria-expanded="false">Menu 2</a>
        <ul class="list-group">
            <li class="list-group-item">Menu 2.1.</li>
            <li class="list-group-item">Menu 2.2.</li>
            <li class="list-group-item">
                <a href="#" aria-expanded="true">Menu 2.3.</a>
                <ul class="list-group">
                    <li class="list-group-item">Menu 2.3.1.</li>
                    <li class="list-group-item">Menu 2.3.2.</li>
                    <li class="list-group-item">Menu 2.3.3.</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

如果有人知道如何解决我的这两个问题，我将非常高兴。

Answer 1

试试这个，您可以通过为您尝试更改的标签调用特定ID来更改

function myFunction() {
    document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
}