Меню выпадающего меню Bootstrap в фокусе подменю

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