JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-menu">
        <li>Letters</li>
        <li>Numbers</li>
    </ul>
    
    <ul class="sub-menu hidden">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
    <ul class="sub-menu hidden">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

CSS

.hidden { display: none }
.main-menu li { display: inline }

JavaScript

var timerId,
        $mainMenuItems = $(".main-menu li"),
        $subMenus = $(".sub-menu");
        
    $mainMenuItems.hover(
        function(){
            clearTimeout(timerId);
            $subMenus.slideUp('fast');
            $($subMenus[$mainMenuItems.index(this)]).hide().removeClass('hidden').slideDown('fast');
        }, function(){
            var i = $mainMenuItems.index(this);
            timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
        }
    );
    $subMenus.hover(
        function() {
           clearTimeout(timerId);
        },
        function() {
           $(this).slideUp('fast');
        }
    );