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

$('#parent-container').live("mouseenter", function() {
    var $this = $(this);
        $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().fadeTo('slow', 1.0);
}).live("mouseleave",focusOut);
$("#select-grind-type").focus(function(){
    $('#parent-container').die("mouseleave");
});
$("#select-grind-type").live("focusout change",function(){
    $('#parent-container').live("mouseleave",focusOut);
});
function focusOut(e) {
    var $this = $(this),
        $selectOptionsContainer = $this.find('#child-container');
    $selectOptionsContainer.stop().hide();
}