JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li>Item 3</li>
</ul>

<ul id="menu1" class="submenu">
    <li>Subitem 1</li>
    <li>Subitem 2</li>
    <li>Subitem 3</li>
</ul>

<ul id="menu2" class="submenu">
    <li>Subitem 1</li>
    <li>Subitem 2</li>
    <li>Subitem 3</li>
</ul>

CSS

body {margin:5px;font-size:12px}
ul {list-style:none;font-family:sans-serif;color:#333;padding:5px;cursor:default}
li {display:inline-block}
.submenu {display:none;background:#D8F0D5}

JavaScript

var $ = function(el) {
    return document.getElementById(el)
};

var menu_timer;

$("item1").onmouseover = function() {
    window.clearTimeout(menu_timer);
    $("menu1").style.display = "block";
}

$("menu1").onmouseover = function() {
    window.clearTimeout(menu_timer);
}

$("menu1").onmouseout = function(e) {
    window.clearTimeout(menu_timer);
    if (!parent(e.relatedTarget, this)) {
        var menu = this;
        menu_timer = window.setTimeout(function() {
            menu.style.display = "none";
        }, 100)
    }
}

var parent = function(el, p) {
    if (!el) {
        return false;
    }
    if (el !== p) {
        while (el.parentNode) {
            el = el.parentNode;
            if (el == p) {
                return true;
            }
        }
    }
    else {
        return true;
    }
    return false;
}