JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button1">Button 1</div>
<div id="button2">Button 2</div>
<div id="button3">Button 3</div>

<div id="submenu1" class="chain">Submenu 1</div>
<div id="submenu2" class="chain">Submenu 2</div>
<div id="submenu3" class="chain">Submenu 3</div>

CSS

#button1,#button2,#button3 {
    display:inline;
    background-color:LightBlue;
    margin:2px;
    font-size:30px;
}

.chain {display:none;}

#submenu1 {
    background:red;
    width:200px;
    height:100px;
}
#submenu2 {
    background:blue;
    width:300px;
    height:200px;
}
#submenu3 {
    background:orange;
    width:400px;
    height:300px;
}

JavaScript

$(document).ready(function() {
    $("#button1").data("panelId", "#submenu1");
    $("#button2").data("panelId", "#submenu2");
    $("#button3").data("panelId", "#submenu3");

    $("#button1, #button2, #button3").mouseenter(function() {
        var first = true;
        var panelId = $(this).data("panelId");
        $(".chain").not(panelId).slideUp(function() {
            if (first) {
                first = false;
                //alert('sdfddsfs');
                $(panelId).stop().slideToggle(400);
            }
        });
        setTimeout(function(){ // UPDATED - FOR CLEAR THE QUEUE
        //$( ".chain" ).stop(false,true);
        $( ".chain" ).finish(); // you can use either .stop() or .finish()               
       },400);
    });
    
    $( ".chain" ).mouseenter(function() {
            //alert('sdf');
        $(this).slideDown(400);  
    });
    $( ".chain" ).mouseout(function() {
            //alert('sdf');
        $(this).slideUp(400);  
    });
});