JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a></li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

CSS

.ui-menu {
    margin: 20px;
    width: 200px;
}

JavaScript

$(document).ready(function() {
    var menu = $('#menu');
    menu.menu();
    
    var blurTimer;
    var blurTimeAbandoned = 200;  // time in ms for when menu is consider no longer in focus
    
    menu.on('menufocus', function() {
        clearTimeout(blurTimer);
    });
    
    menu.on('menublur', function(event) {
        blurTimer = setTimeout(function() {
            menu.menu("collapseAll", null, true );
        }, blurTimeAbandoned);
    });
});