title: bootstrap 3 navbar dropdown box color
body: <p>I am using flat UI theme with bootstrap 3.  The flat UI theme navbar is not working correctly and many are having similar issues with it that have posted on github.  So I decided to just use the default BS3 navbar and write my own code (with the help of another stackoverflow thread) to style the menu the way I would like. I am doing this in LESS as an override css.</p>
  
  <p>The problem is I can't figure out how to change the following.</p>
  
  <ul>
  <li>drop down box color</li>
  <li>the drop down box link color</li>
  <li>drop down box link hover color</li>
  </ul>
  
  <p>Here is the css I am using:</p>
  
  <pre><code>/* navbar */
  .navbar-default {
     font-size: floor(@component-font-size-base * 1.067); // ~16px
     border-radius: @border-radius-large;
     border: none;
     background-color: @brand-primary !important;
  }
  /* title */
  .navbar-default .navbar-brand {
      color: #5E5E5E;
  }
  /* link */
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: @clouds;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover {
      color: @clouds;
  }
  .navbar-default .navbar-nav &gt; .active &gt; a, 
  .navbar-default .navbar-nav &gt; .active &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
      color: @clouds;
      background-color: @brand-secondary;  // Changes color of main button that is currently active.
  }
  .navbar-default .navbar-nav &gt; .open &gt; a, 
  .navbar-default .navbar-nav &gt; .open &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .open &gt; a:focus {
      color: @clouds;
      background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
  }
  /* caret */
  .navbar-default .navbar-nav &gt; li &gt; a .caret {
      border-top-color: @clouds;
      border-bottom-color: @clouds;
      color: @clouds;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover .caret {
      border-top-color: #333;
      border-bottom-color: #333;
  }
  .navbar-default .navbar-nav &gt; .open &gt; a .caret, 
  .navbar-default .navbar-nav &gt; .open &gt; a:hover .caret, 
  .navbar-default .navbar-nav &gt; .open &gt; a:focus .caret {
      border-top-color: #555;
      border-bottom-color: #555;
  }
  </code></pre>
  
  <p>This produces the correct color bar, bar link, carets, and bar hover effects.  But when I click a button with a sub menu, the sub menu still appears in the default BS gray.  What classes am I missing to change the drop down sub menu background color, link color, etc?</p>
  
  <p><img src="https://i.stack.imgur.com/B6SBX.jpg" alt="Bootstrap navbar sub menu"></p>
  
  <p>Thanks</p>