JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menuWrapper">
    <li class="menu1">
        <div class="menu1content">
          Hahai
        </div>
    </li>
    <li class="menu2">Menu 2</li>
</ul>

CSS

.menuWrapper {background:gray; padding:5px; width:70px}
.menuWrapper div {height:100px; width:70px}
.menu1 {background:red}
.menu2 {background:blue; display:none}
.menu1content{background:blue; display:none}

JavaScript

$('.menu1').click(function(){
    $('.menu1content').show();
});

$('.menuWrapper').mouseleave(function(){
    $('.menu2').hide();
});