Выпадающее меню Bootstrap 3 меняет фон в фокусе подменю ⇐ CSS

[Anonymous]

Я изменил цвета фона моего Bootstrap-меню, но цвет фона основного раскрывающегося элемента в списке меняется, когда подменю (меню, которое открывается при нажатии на раскрывающийся элемент) находится в фокусе (т. е. мой указатель мыши находится над ним).
Это раскрывающийся список при наведении курсора мыши (который ведет себя так, как задумано):




Это раскрывающийся список, когда я наведу указатель мыши на подменю, которое открывается, когда нажат раскрывающийся список (цвет фона не тот, который мне нужен; я хочу, чтобы цвет фона остался прежним):
[img]https://i.sstatic.net /9bteF.png[/img]


Вот HTML:

[*]

Dropdown [/b]

• Action
• Another action
• Something else here
• Nav header
• Separated link
• One more separated link

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


Подробнее здесь: https://stackoverflow.com/questions/185 ... menu-focus