title: Bootstrap 3 dropdown menu changing background on submenu focus
body: <p>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).</p>
  
  <p>This is the dropdown on hover (which is behaving as intended):</p>
  
  <p><img src="https://i.stack.imgur.com/j0Jjw.png" alt="enter image description here"></p>
  
  <p>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):
  <img src="https://i.stack.imgur.com/9bteF.png" alt="enter image description here"></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
          Dropdown &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.navbar-mainnav  {
      background-color: #883333;
      background-image: none;
  }
  
  .navbar-mainnav a, .navbar-mainnav a:hover {
      color: #FFFFFF;
  }
  
  .navbar-mainnav .navbar-nav &gt; .active &gt; a, .navbar-nav &gt; .active &gt; a:hover, .navbar-nav &gt; .active &gt; a:focus {
      color: #ffffff;
      background-color:transparent;
  }
  
  .navbar-mainnav .nav &gt; li &gt; a:hover, .mainnav &gt; li.dropdown.open  {
    background-image: none;
    background-color: #B54646;
  }
  
  .navbar-mainnav .dropdown-menu &gt; li &gt; a:hover, .navbar-mainnav .dropdown-menu &gt; li &gt; a:focus {
    background-color: white;
    background-image: none;
    filter: none;
  }
  
  .navbar-mainnav .dropdown-menu &gt; li &gt; a:hover {
    background-color: #CC6666;
    background-image: none;
  }
  </code></pre>