Q:

¿Cómo mantengo el color de mi dropdown-menu luego de darle click?

Desearía saber ¿cómo puedo mantener el color original de un dropdownMenu ya que antes de clickear el menú se muestra así:

Luego al clickear se observa de la siguiente manera:

Pero, si no realizo ninguna opción y simplemente regreso el menú presionándolo de nuevo cambia de color y se visualiza gris:

¿Cómo puedo lograr que regrese siempre a su azul natural? Esto ocurre solo cuando lo regreso ya que si yo lo clickeo y luego hago click en otra parte del portal en ese momento si retiene el color azul, ¿alguna sugerencia?
Éste es mi código HTML 

ul.nav { 
  display:table; width:100%; 
}

ul.nav > li { 
  display:table-cell; float:none;
}

ul.nav > li > a { 
  background-color: #006699;
  text-align: center;
}

ul.nav > li > a > h4 { 
  color:white;
}

h4 { 
  color:white !important;
}

.navbar-header {
  margin: 0;
  display:inline-block;
  float:none;
}

a:hover{
  background-color: #99ccff !important
}

.page-header h1 {
  color: #ff9900;
  font-family: 'Lobster';
}

.page-header h1:hover {
  color: #0099ff;
}

.dropdown-menu{
  background-color: #006699 !important
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse "  >
  <div id="navigation">
    <ul class="nav nav-pills">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          <h4 >MENU <b class="caret"></b></h4>
        </a>
        <ul class="dropdown-menu" style="background-color: #006699" >
          <li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
          <li class="divider"></li>
          <li><a href="#"><h4>Cambiar Email</h4></a></li>
          <li><a href="#"><h4>Cambiar Password</h4></a></li>
          <li><a href="#"><h4>Logout</h4></a></li>
        </ul>
      </li>
      <li role="presentation" ><a href="index - copia.html"><h4> INICIO</h4></a></li>
      <li role="presentation" ><a href="varon.html"><h4> LOCATION</h4></a></li>
      <li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
    </ul>
  </div>
</nav>

A:

Lo más probable es que el estilo de Bootstrap esté siendo aplicado, tal vez con la pseudoclase :focus o alguna otra, te doy una idea del código que debes buscar en el css de Bootstrap para que hagas el 'override' respectivo, sin modificar bootstrap:
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}

O tal vez:
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

