JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo">
    <div>MENU</div>
    <div class="qwa">
        <ul>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
            <li>Menu item</li>
        </ul>
    </div>
</div>

CSS

.logo {
   cursor: pointer; 
}
.qwa {
    display:none;
}

JavaScript

$('.logo').hover(
        function(){
            $('.qwa').stop(false, true).show().animate({opacity:'1'}, {
                duration: 150, 
                specialEasing: {
                    opacity: 'linear'
                }
            });
        },
        function(){
            $('.qwa').stop(false, true).hide().animate({opacity:'0'}, {
                duration: 150, 
                specialEasing: {
                    opacity: 'linear'
                }
            });
        }
    );