Bootstrap dropdown menu changing background on submenu focus

Bootstrap dropdown menu changing background on submenu focus

I have changed the background colors of my Bootstrap menu, but the
background color of the main dropdown item in the list is changing when
the submenu (the menu that opens up when the dropdown item is clicked) is
in focus (ie my mouse is over it).
This is the dropdown on hover (which is behaving as intended):
http://imgur.com/Fb8UjFn
This is the dropdown when I have my mouse over the submenu that opens when
the dropdown is clicked (the background color is not what I want; I want
the background color to remain the same): http://imgur.com/HDL1AZT
Here's the 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>
And the 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;
}