JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">Dropdown <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>

CSS

.dropdown-menu {
    padding: 0px;
}

JavaScript

var timeout;
jQuery('.dropdown').on('mouseover', function () {
    clearInterval(timeout);
    jQuery('.dropdown-menu', this).stop(true, true).delay(200).fadeIn();
});

jQuery('.dropdown').on('mouseout', function () {
    var thisView = this;
    timeout = setTimeout(function () {
        jQuery('.dropdown-menu', thisView).stop(true, true).delay(200).fadeOut();
    }, 200);
});