JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <ul id="nav1" class="nav">
        <li><a href="#">navigation</a></li>
        <li><a href="#">navigation</a>
            <ul>
                <li><a href="#">sub navigation</a></li>
                <li><a href="#">sub navigation</a></li>
                <li><a href="#">sub navigation</a></li>
                <li><a href="#">sub navigation</a></li>
            </ul>
        </li>
        <li><a href="#">navigation</a></li>
    </ul>
    <br />
    <div class="selectBox" id="select1">
        <select>
        <option>value</option>
        <option>value</option>
        <option>value</option>
        <option>value</option>
        </select>
    </div>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
.wrap{ width:500px; margin:0 auto;}
ul.nav { float:left;}
ul.nav li { float:left; padding:0px 10px;  border-right:1px solid #ccc; position:reltaive; list-style-type:none;}
ul.nav li ul { position:absolute; left:-999px; }
ul.nav li:hover ul { left:auto; position:absolute; }
ul.nav ul li { width:150px; float:none;  border:0px; background:#999; }
ul.nav ul li a { color:#fff; text-decoration:none;}
.selectBox { margin-left:100px; margin-top:10px;}

JavaScript

$('#nav1').mouseover(function() {
  $('#select1').hide();
});
$('#nav1').mouseleave(function() {
  $('#select1').show();
});