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';
}

如何在MetisMenu下拉菜单中更改背景颜色和设置边距？

1 个答案: