JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <div class="nav_label">Menu Options</div>
        <div class="nav_select" style="display:none;">
            <select id="myList" >
                <option value="" selected="selected">Choose an Option</option>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
            </select>   
        </div>
        </div>
<div id="output">output</div>

CSS

#output { margin-top: 100px; }
li:hover {
/*    border: 1px solid black;*/
}

JavaScript

$('#container').hover(

function() {
    $(this).children('.nav_label').hide();
    $(this).children('.nav_select').show();
}, function() {
    console.log(document.activeElement.id);
    if (!$('#myList').is(':hover')) {
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
});