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 {
    max-width:200px;
}
.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 > a").click(function (e) {
        $(this).closest('.menu_btn').toggleClass("hover");
        e.stopPropagation();
    });
    $(document).on('click', function (e) {    
        if (!$(e.target).closest('.hover').length) $('.menu_btn').removeClass("hover");
    });
});