Bootstrap 3下拉菜单改变子菜单焦点的背景

Question

我更改了Bootstrap菜单的背景颜色，但是当子菜单（单击下拉项目时打开的菜单）处于焦点（即我的）时，列表中主下拉项的背景颜色会发生变化鼠标结束了。）

这是悬停下拉（表现符合预期）：

这是当鼠标悬停在单击下拉列表时打开的子菜单时的下拉列表（背景颜色不是我想要的;我希望背景颜色保持不变）：

这是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;
}

Answer 1

只是把这个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;
}

Answer 2

也许试试这个？请发布一个jsfiddle，以确保它有效。

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

Answer 3

这是一个工作小提琴：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;
}

Answer 4

您需要设置f_cnia_repeat = True类的锚标记子代以及.open和:hover状态的样式，如下所示：

:focus

在整个页面中运行代码片段，以了解其工作原理。

.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover {
  background: #B54646;
  color: #fff;
}

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

.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover {
  background: #B54646;
  color: #fff;
}