Bootstrap下拉菜单更改子菜单焦点上的背景

问题描述：

我已更改我的Bootstrap菜单的背景颜色，但列表中主下拉菜单项的背景颜色正在更改，当子菜单（下拉菜单项打开时点击）是焦点（即我的鼠标在它）。Bootstrap下拉菜单更改子菜单焦点上的背景

这是悬停下拉（这表现为意）：

enter image description here

这是下拉时，我有我的鼠标，当下拉菜单被点击（背景色打开子菜单是不是我想要的，我想要的背景颜色保持不变）： enter image description here

这里的HTML：

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     Dropdown <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li class="dropdown-header">Nav header</li> 
     <li><a href="#">Separated link</a></li> 
     <li><a href="#">One more separated link</a></li> 
    </ul> 
</li>

而CSS：

.navbar-mainnav { 
    background-color: #883333; 
    background-image: none; 
} 

.navbar-mainnav a, .navbar-mainnav a:hover { 
    color: #FFFFFF; 
} 

.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color:transparent; 
} 

.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open { 
    background-image: none; 
    background-color: #B54646; 
} 

.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus { 
    background-color: white; 
    background-image: none; 
    filter: none; 
} 

.navbar-mainnav .dropdown-menu > li > a:hover { 
    background-color: #CC6666; 
    background-image: none; 
}

请你可以做一个小提琴 – Hive7

需要一个小提琴，在html看起来不完整的。 –

答

只是把这个CSS我觉得这是工作

.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { 
background-color: #B54646; 
}

答

也许尝试呢？请张贴一个jsfiddle，以便我们确保它可以正常工作。

.navbar-default .navbar-nav > li:hover { 
    background: #your-background-color; 
    color: #your-text-color; 
}

答

这里的工作小提琴：https://jsfiddle.net/Lindow/yvyvg1ja/4/

为了防止后台从下拉菜单中点击使用改变：

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { 
    background-color: #CC6666; 
}

Bootstrap下拉菜单更改子菜单焦点上的背景

相关推荐