title: Bootstrap navbar dropdown style
body: <p>How can i change the marked colors of the dropbar on a navbar? I used a <a href="http://bootstrap3-menu.codedorigin.com/#" rel="nofollow noreferrer">navbar generator</a>, but it is have a bug and don't generate the mentioned css codes for the desired colors. Here is the picture:</p>
  
  <p><a href="https://i.stack.imgur.com/2OtMA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2OtMA.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my current css overrides:</p>
  
  <pre><code>.dropdown-menu { background-color: #3E968A}
  .dropdown-menu&gt;li&gt;a:hover, .dropdown-menu&gt;li&gt;a:focus, .dropdown-menu &gt; .active &gt; a:hover { background-color: #42CBAD}
  .dropdown-menu&gt;li&gt;a { color: #EEF9FA}
  .dropdown-menu&gt;li&gt;a:hover, .dropdown-menu&gt;li&gt;a:focus { color: #1D2C43}
  .navbar-inverse .navbar-nav&gt;.dropdown&gt;a .caret { border-top-color: #1D2C43}
  .navbar-inverse .navbar-nav&gt;.dropdown&gt;a:hover .caret, .dropdown-menu &gt; .active &gt; a { border-top-color: #486972}
  .navbar-inverse .navbar-nav&gt;.dropdown&gt;a .caret { border-bottom-color: #1D2C43}
  .navbar-inverse .navbar-nav&gt;.dropdown&gt;a:hover .caret { border-bottom-color: #486972}
  .navbar-inverse .navbar-nav&gt;.active&gt;a:hover, .navbar-inverse .navbar-nav&gt;.active&gt;a:focus { color: #EEF9FA}
  </code></pre>