引导下拉菜单颜色悬停不起作用

Posted 2023-05-08

【中文标题】引导下拉菜单颜色悬停不起作用

【英文标题】：bootstrap dropdown menu color hover not working

【发布时间】：2015-01-29 15:52:11

【问题描述】：

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

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

这是一个小提琴：http://jsfiddle.net/cb25dj9g/

【问题讨论】：

请提供小提琴

我解决了问题的第二部分。对于也遇到此问题的任何人，它位于.navbar-final .navbar-nav > li > a background-color:transparent;

与其尝试调整css，不如通过getbootstrap.com/customize调整原始变量，或者通过下载源代码并将其编译为自己的css更好getbootstrap.com/getting-started

【参考方案1】：

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

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