css - Bootstrap 下拉菜单颜色悬停不起作用

Question

我一直在尝试为导航栏中的下拉菜单编辑悬停时的背景颜色，但它继续保持这种灰色。我在下面发布了一些我尝试调整的代码以及 HTML 代码。

.dropdown-menu {
background-image: transparent !important;
background-color:#285eff !important;
color:#668CFF !important;
border: 1px solid #668CFF !important;
}
.dropdown-menu > li > a {
background-image: transparent !important;
color: #D2DCFC !important;
}
.dropdown-toggle:active,
.dropdown-toggle:focus,
.dropdown:active,
.dropdown > .open {
background-image: transparent !important;
background-color:#2658ED !important;
}
.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:active,
.dropdown-submenu:hover > a{ 
background-image: transparent !important;
background-color: #2658ED !important;
}
.dropdown-menu li.active > a,
.dropdown-menu li.active > a:hover,
.dropdown-menu li.active > a:focus {
background-image: transparent !important;
background-color: #2658ED !important;
}
ul.nav li ul {
background-color:#2658ED !important;
}

<div class="navbar navbar-final navbar-static-top">
<div class="container-fluid">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">CleverPlay</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="yahtzee/index.php">Yahtzee</a></li>
                    <li><a href="hangman/index.php">Hangman</a></li>
                    <li><a href="flapcard/index.php">Flapcard</a></li>
                </ul>
            </li>
            <li><a href="#">Scores</a></li> 
            <li><a href="#">About</a></li>  
            <li><a href="#">Contact</a></li>    
        </ul>
    </div>
</div>
</div>

我也遇到了一个问题，每次我从网页所在的窗口中取消选择另一个网页(而不是选项卡)时，它会将背景颜色变为灰色，但文本仍然很好。

• 这是一个 fiddle :http://jsfiddle.net/cb25dj9g/

Answer 1

对于问题的前半部分，添加以下内容:

.dropdown-menu > li > a {
background-image:none; // before setting any background-color
}