title: Changing nav opacity without affecting tabs
body: <p>I have a nav menu and I want to make its background transparent without affecting the tab's background - but it won't work. When I use <code>opacity</code>, the whole nav becomes transparent, even the tabs. When I use <code>rgba</code>, it doesn't go transparent at all. </p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.nav.nav-tabs {
    background-color: rgba(0, 0, 0, .3);
  }
  ul.nav.nav-tabs li {
    background-color: #6FD508;
  }
  ul.nav.nav-tabs li a {
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;
      &lt;a href="#tab1" data-toggle="tab"&gt;tab1&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#tab2" data-toggle="tab"&gt;tab2&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>