JSFiddle - React, Tailwind, and code Playground

HTML

<div id='adm1n-toolbar'>
  <form>
      <select>
        <option>Val 1</option>
        <option>Val 2</option>
      </select>
  </form>
</div>

CSS

#adm1n-toolbar {
    position: fixed;
    top: -115px;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: gray;
    border: 1px solid #999999;
    z-index: 3000;
    text-align: center;
}

JavaScript

$('#adm1n-toolbar')
        .mouseenter(function() {
            var toolbarposition = $(this).position();
            if (toolbarposition.top < 0) {
                $(this).animate({top: '0'}, 300);
            }
        })
        .mouseleave(function() {
            var toolbarposition = $(this).position();
            if (toolbarposition.top >= 0 && !$('#adm1n-toolbar form select').is(':focus')) {
                $(this).animate({top: '-115'}, 300);
            }
        });

    $('#adm1n-toolbar-content select').change(function(e) {
        e.preventDefault();
        $('#adm1n-toolbar').trigger('mouseleave');
    });