JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu_btn">
    <a href="#">Botão</a>
    <div class="submenu">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>

CSS

.menu_btn{}
.menu_btn a{color:#000;background:#fff;text-decoration:none;border:1px solid transparent;padding:5px;}
.hover a{color:red;border:1px solid red;border-bottom:0}
.submenu{display:none;max-width:200px;border:1px solid red;margin-top:3px}
.hover .submenu{display:block;}

JavaScript

$(document).ready(function(){
	$(".menu_btn").click(function(e){
	    var e=window.event||e;
	    $(this).addClass("hover");
	    e.stopPropagation();
	  });
	$(document).click(function(e){
	    $('.menu_btn').removeClass("hover");
	});
});