title: Changing to bootstrap dropdown-menu transparent background color
body: <p>I'm a bootstrap newb but I feel like I have been beating my head up against a wall on this for too long and would appreciate any help.</p>
  
  <p>I have what seems to be a fairly basic nav bar that I am trying to style. I am trying to simply change the one background color of the <code>.dropdown-menu</code> to be transparent like the rest of the navbar. Seems like no matter what I try I cant override it. Not sure if this is relevant information but just in case it is, I'm doing all of this styling in a rails environment.</p>
  
  <p><strong>application.html.erb</strong></p>
  
  <pre><code>  &lt;div class="collapse navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="hidden"&gt;
          &lt;a class="page-scroll" href="#page-top"&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="page-scroll" href="#about"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="page-scroll" href="#rules"&gt;Rules&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="page-scroll" href="#where"&gt;Where We Play&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Blog&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Members&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;% if current_user %&gt; &lt;!-- facebook login --&gt;
              &lt;li&gt;&lt;%= link_to current_user.name, members_profile_path %&gt;&lt;/li&gt;
              &lt;li&gt;&lt;%= link_to "Sign Out", sign_out_path, method: :delete %&gt;&lt;/li&gt;
            &lt;% else %&gt;
              &lt;li&gt;&lt;%= link_to "auth/facebook" do %&gt;&lt;%= "Sign In" %&gt;&lt;% end %&gt;&lt;/li&gt;
            &lt;% end %&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So far, this is all of the styling that I have done to the navbar.</p>
  
  <p><strong>application.scss</strong></p>
  
  <pre><code>nav {
    font-family: 'Special Elite', cursive;
    position: relative;
    padding: 30px 0px 0px 180px;
    color: white;
  }
  
  nav.navbar-default {
    background: -webkit-linear-gradient(black, transparent 100%), transparent;
    border-color: transparent;
  }
  
    // Bootstrap overrides
    .nav.navbar-nav.navbar-right li a {
      color: #fff;
      background-color: transparent;
    }
  </code></pre>
  
  <p>This is the result I get. Again, the goal here is to have the background of the <code>.dropdown-menu</code> like the rest of the nav bar and for the text to be white.</p>
  
  <p><img src="https://farm2.staticflickr.com/1501/25743996995_3956c96e64.jpg"></p>