JSFiddle - React, Tailwind, and code Playground

HTML

<p>hover over gray box to see child container</p>
<div id="parent-container">
    <div id="child-container">
        select an item to see bug
        <select id="select-grind-type" name="some_name">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
            <option>option 5</option>
        </select> 
    </div>
</div>
<p>mouse off gray box to see child box fade out.</p>

CSS

#parent-container {
    height:200px;
    width:400px;
    outline: solid 1px red;
    background-color:#ccc;        
    position:relative;
}

#child-container {
    height:100px;
    width:200px;
    outline: solid 1px red;
    background-color:#fff;        
    float:right;
    display:none;
}

JavaScript

var selectOpened = false;
$('#select-grind-type').click(function(e){
    selectOpened = !selectOpened;
    e.stopPropagation();
});
$('body').click(function(){
    if (selectOpened) {
        selectOpened = false;
    }
})
$('#parent-container').live("mouseenter", function() {
    var $this = $(this),
        $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().fadeTo('slow', 1.0);
}).live("mouseleave", function(e) {
    if (!selectOpened) {
        var $this = $(this),
            $selectOptionsContainer = $this.find('#child-container');
        $selectOptionsContainer.stop().hide();   
    }
});