JSFiddle - React, Tailwind, and code Playground

HTML

<p class="click-me">Click me</p>
<ul class="hidden">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>

CSS

<style> ul {
    list-style: none;
}
.click-me {
    display: inline;
}
.hidden {
    display:none;
    background: #333;
    width:150px;
    color:red;
    padding:30px;
}
</style>

JavaScript

$(document).ready(function () {
    $('.click-me').click(function () {
        $('.hidden').slideDown();
    });

    $(document).mouseup(function (e) {
        var container = $(".hidden");

        if (!container.is(e.target) // if the target of the click isn't the container...
        &&
        container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $('.hidden').slideUp();
        }
    });
});