我已经更改了 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;
}