title: Overwrite Bootstrap Navbar Dropdown Menu Colors with LESS?
body: <p>I don't find a way to use custom background colors for both the dropdown-toggle and the dropdown-menu of a Bootstrap sidebar with LESS CSS. It all works fine in pure CSS, but when using LESS, I can't get it to work. What I want to achieve is something like this: </p>
  
  <p><a href="http://jsfiddle.net/GqVM2/6/" rel="nofollow">http://jsfiddle.net/GqVM2/6/</a></p>
  
  <p>My LESS code for that bit is here:</p>
  
  <pre><code>.navbar-default {
    .navbar-nav {
      &gt; open {
        &gt; a,
        &gt; a:hover,
        &gt; a:focus {
          @media (min-width: @grid-float-breakpoint) {
            background-color: #aaaaaa;
          }
        }
        &gt; .dropdown-menu {
          @media (min-width: @grid-float-breakpoint) {
            background-color: #aaaaaa;
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>The above code does not override the Bootstrap LESS as (I suppose) it should. With the CSS I used in the JSFiddle, it works fine though.</p>
  
  <p>I'm pretty new to LESS, so excuse me if this is just a stupid mistake. When I inspect the generated CSS in the Chrome Developer Tools, the above does not even show up (I'm using the LESS JavaScript parser for development).</p>
  
  <p>Thanks for your help!</p>