JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        First Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        Second Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

CSS

/* Make backdrop visible for demonstration */
.dropdown-backdrop {
    background: rgba(55,55,55,.2);
}

.btn-dropdown-add {
    background: #DDD;
    margin: 10px 10px 0;
    padding: 5px 10px;
    z-index: 5000;
}
.dropdown, .dropdown-menu {
    margin-left: 10px;
}

JavaScript

// 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();
});