JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a href="...">Item 1</a></li>
    <li><ul class="submenu">
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul class="submenu">
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>
</ul>

CSS

.menu {
    position: relative;
    display: inline-block;
    background: #ccc;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%;
    background: #ccc;
}

.menu li:hover > .submenu, .submenu.show {
  display: inline-block;
}

JavaScript

$('body').on('mouseleave','.submenu', function(e) {

    var jTarget = $(e.currentTarget).addClass('show');

    setTimeout(function() {
            jTarget.removeClass('show');
    }, 500);
})