JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="hover">Hover over Me</div>
</div>
<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Aberdeen</a>

    </li>
    <li><a href="#">Ada</a>

    </li>
    <li><a href="#">Adamsville</a>

    </li>
    <li><a href="#">Addyston</a>

    </li>
    <li> <a href="#">Delphi</a>

        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a>

            </li>
            <li><a href="#">Saarland</a>

            </li>
            <li><a href="#">Salzburg</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Saarland</a>

    </li>
    <li> <a href="#">Salzburg</a>

        <ul>
            <li> <a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>

                    </li>
                    <li><a href="#">Saarland</a>

                    </li>
                    <li><a href="#">Salzburg</a>

                    </li>
                </ul>
            </li>
            <li> <a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>

                    </li>
                    <li><a href="#">Saarland</a>

                    </li>
                    <li><a href="#">Salzburg</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">Perch</a>

            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a>

    </li>
</ul>

CSS

#container {
    background: lightblue;
    width: 400px;
    height: 300px;
}
.ui-menu {
    width: 150px;
    position:absolute;
    display:none;
}
#hover {
    width:100px;
    height: 100px;
    margin: 50px;
    background: lightgreen
}

JavaScript

$("#menu").menu();

$('div#hover').hover(function (event) {
    event.stopPropagation();
    var x = event.pageX;
    var y = event.pageY;
    $('#menu').css({
        top: y,
        left: x
    }).fadeIn("normal")

},

function (event) {

});

$('#menu').hover(function (event) {
    event.stopPropagation();
},

function () {

})

$('#container').hover(function (event) {
    $('#menu').hide();
    console.log('sdasda')
},

function () {

})