JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<div id="flip">
    <ul>
        <li>
            <a href="#">Link 1</a>
        </li>
        <li>
            <a href="#">Link 2</a>
        </li>
        <li>
            <a href="#">Link 3</a>
        </li>
        <li>
            <a href="#">Link 4</a>
        </li>
    </ul>
</div>

<div class="submenu"></div>

CSS

.submenu {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: red;
    display: none;
}

JavaScript

var isOpen = false;
    
    // Clicking on the actual anchors shows in the submenu
    $('#flip > ul li > a' ).on( 'click', function( e ) {
        e.preventDefault();
        $(".submenu").fadeIn( "slow", function() { isOpen = true; } );
    });

    $( document ).on( 'click', function( e ) {
        // If you clicked in the document, as long as you didn't click one of the
        // triggers, then close the menu.
        if( isOpen && ( $.inArray( e.target, $('#flip > ul > li > a' ) ) === -1 ) ) {
            $(".submenu").fadeOut("slow", function() { isOpen = false; } );
        }
        
    });