JSFiddle - React, Tailwind, and code Playground
HTML
<div id='toolbar'>
<form>
<select>
<option value='1'>Value</option>
</select>
</form>
</div>
CSS
#toolbar {
position: fixed;
top: -115px;
left: 0;
width: 100%;
height: 120px;
background-color: gray;
}
JavaScript
$('#toolbar').hover(
function() {
var toolbarposition = $(this).position();
if (toolbarposition.top == -115) {
$(this).animate({top: '0'}, 300);
}
},
function() {
var toolbarposition = $(this).position();
if (toolbarposition.top == 0 && $('#toolbar form').not(':focus')) {
$(this).animate({top: '-115'}, 300);
}
}
);