JSFiddle - React, Tailwind, and code Playground

HTML

<button id="menuButton">Menu Button</button>
<ul style="z-index: 9999999;position: absolute;" id="menuElement">
    <li><a href="#">Select Green</a>

    </li>
    <li><a href="#">Select Red</a>

    </li>
    <li><a href="#">Select Gray</a>

    </li>
</ul>

JavaScript

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton.button({
    icons: {
        secondary: "ui-icon-triangle-1-s"
    }
})
    .click(function (event) {
    $(document).one("click", function () {
        $menuElement.css("visibility", "hidden");
    });

    $menuElement.css("visibility", "visible");
    event.stopPropagation();
});

$menuElement
    .menu({
    select: function (event, ui) {
        $menuElement.css("visibility", "hidden");
    }
})
    .css("visibility", "hidden")
    .position({
    my: "left top",
    at: "left bottom",
    of: $buttonElement
});