单击时以及将鼠标悬停在其上时更改下拉菜单的颜色

Question

navbar-default点击它后,我的下拉菜单会恢复颜色.当我将鼠标悬停在下拉菜单中的项目上时,它们也会返回navbar-default颜色.

这是我的意思的图片:

这是我的HTML:

    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Cable</a></li>
                    <li><a href="#">DSl</a></li>
                    <li><a href="#">Wireless</a></li>
                    <li><a href="#">Business Cable</a></li>
                    <li><a href="#">Business DSL</a></li>
                </ul>
            </li>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Android TV</a></li>
            <li><a href="#">Shaw Direct</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div> 

这是我的CSS:

.navbar-default {
    background-color: #00AEFE;
}
.navbar-default:visited {
    background-color: #00AEFE;
}
ul.dropdown-menu {
    background-color: #00AEFE;
}
ul.dropdown-menu:hover {
    background-color: #00AEFE;
}

Answer 1

只需覆盖引导类即可做到这一点

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
   background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
   background-color: #00AEFE;
}

检查代码片段，这是您需要的吗？运行代码片段并将其更改为全屏模式，然后检查

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
   background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
   background-color: #00AEFE;
}