title: Hide bootstrap's .dropdown-backdrop, CSS only
body: <p>Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?</p>
  
  <p>I've determined that this is possible using Javascript, with <a href="http://jsfiddle.net/a55unr3t/2/" rel="nofollow">JSFiddle here</a>. However, I would like to accomplish this without using additional JS if possible.</p>
  
  <p>
  </p>
  
  <pre><code>&lt;!-- First dropdown: no backdrop --&gt;
  &lt;div id="firstDropdown" class="dropdown"&gt;
      &lt;button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown"&gt;
          First Dropdown &amp;#x25BC;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a class="a_dropdown_item" href="#business"&gt;Business&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="a_dropdown_item" href="#my-events"&gt;Event&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;!-- Second dropdown: yes backdrop --&gt;
  &lt;div id="secondDropdown" class="dropdown"&gt;
      &lt;button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown"&gt;
          Second Dropdown &amp;#x25BC;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a class="a_dropdown_item" href="#business"&gt;Business&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="a_dropdown_item" href="#my-events"&gt;Event&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      // Hide backdrop from #firstDropdown.
      // This can be done with JS as below. Can it be done with only CSS?
      $('#firstDropdown').on('show.bs.dropdown', function () {
        $(".dropdown-backdrop").hide();
      });
  &lt;/script&gt;
  </code></pre>