title: Making bootstrap dropdown transparent
body: <p>I need to get the bootstrap dropdown transparent. How can this be achieved. Below is the html</p>
  
  <pre><code>&lt;div id="mydiv" class="dropdown transparentbar" style="z-index:4"&gt;
         &lt;button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
           Drop mat
           &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&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="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;          
  </code></pre>
  
  <p></p>
  
  <p>CSS
       <pre>
       .transparentbar {
          background-repeat:no-repeat;
          cursor:pointer;
          outline:none;
          border:none;
          box-shadow:none; 
          background-image: none;<br>
          background-color: transparent;
          background: transparent;
          border-color: transparent;<br>
      }
  </pre>
  Can you please help?</p>