title: How to remove bootstrap dropdown container?
body: <p><img src="https://i.stack.imgur.com/eGJu6.png" alt="the issue"></p>
  
  <p>As described in the image, I am attempting to get rid of the transparent container around the dropdown options. I've attempted multiple CSS solutions that have not worked. Here is the HTML code for the dropdown:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(250);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Home&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt; 
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#home" class="page-scroll"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about-section" class="page-scroll"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#services-section" class="page-scroll"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact-section" class="page-scroll"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>