JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vectorMenu">
    <div class="menuHead">Menu Title</div>
    <div class="menu">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
</div>

CSS

div.vectorMenu div.menu {
    display: none;
}

div.vectorMenu:hover div.menu {
    display: block !important;
}

JavaScript

$(document).ready(function () {     
    $("div.menuHead").click(function () {
        //Toggle the menu but don't include it in the hide selector using .not()
        $(this).siblings("div.menu").toggle();
        $("div.menuHead").not($(this)).siblings("div.menu").hide();
});
});