JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div id="hwrapMenu">
    <ul id="hmenu">
        <li>Warner Bros
            <ul>
                <li><a href="#">Wile E Coyote</a></li>
                <li><a href="#">Bugs Bunny</a></li>
            </ul>
        </li>
        <li>Simpsons
            <ul>
                <li><a href="#">Bart</a></li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$(document).ready(function ($) {
    $("#hmenu").menu();          // jquery ui wrapper
    
    var mypos = {
        my: "left top",          // on the element being positioned
        at: "right-40 top+23",   // on the target element
        collision: "fit none"    // horz/vert  flip, fit, flipfit, or none
    };
    
    // This will position the submenu below the selected top menu item.
    $("#hmenu").menu("option", "position", mypos);

    $("#hmenu").css({ "font-size": "80%" });    
    $("#hmenu > .ui-menu-item").css({ "float": "left" });    

});