JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
            <div id='category' class='cathover'> Категории </div>
            <div id='categories' class="cathover">
                <div class='item'>item1</div>
                 <div class='item'>item2</div>
                 <div class='item'>item3</div>
                 <div class='item'>item4</div>       
            </div>    
</div>

CSS

#category{
    width: 100px;
    min-height: 40px;
    background: rgba(0,0,0,.3);
}
#categories{
    width: 451px;
    min-height: 40px;
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 34px;
    left: 5px;
    z-index: -1;
   opacity: 0;
}
.item{
    width: 150px;
    height: 30px;
    padding-top: 10px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    background: rgba(4,4,4,0);
    float: left;
    font-family: 'Verdana', sans-serif;
    font-size:16px;
    text-decoration:none;
    color: #ffffff;
}

JavaScript

$('.cathover').mouseenter(function(){
    $('#categories').stop().show().animate({opacity: 1}, 300);
})
$('.cathover').mouseleave(function(){
    $('#categories').stop().animate({opacity: 0}, 300, function(){ $(this).hide() });
})