JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="uiMenu">
   
    <li>
        <span title="1">File</span>
        
        <ul>
           <li>
            
               <span title="1">New</span>
               <ul>
                   <li>
                       New Project
                   </li>
                   <li>Test</li>
               </ul>
            
            </li>
            <li>Open</li>
            <li>Save</li>
            <li>Save As...<ul>
                   <li>
                       New Project
                   </li>
                   <li>Test</li>
               </ul></li>
            <li>Exit</li>
        </ul>
    </li>
    
     
    <li>
        <span title="1">File</span>
        
        <ul>
           <li>
            
               <span title="1">Testi</span>
               <ul>
                   <li>
                       New Project
                   </li>
                   <li>Test</li>
               </ul>
            
            </li>
            
             <li>Open</li>
            <li>Save</li>

             <li>Open</li>
            <li>Save</li>

           
        </ul>
    </li>
    
   
     <li>
        <span title="1">File</span>
        
        <ul>
           <li>
            
               <span title="1">Testing Long</span>
               <ul>
                   <li>
                       New Project Longer
                       <ul>
                   <li>
                       New Project
                   </li>
                   <li>Test</li>
               </ul>
                   </li>
                   <li>Test</li>
               </ul>
            
            </li>
           
        </ul>
    </li>
    
    
    
</ul>


<div> hello</div>

CSS

.uiMenu{
    margin: 0;
    padding: 0;
    background-color: #587BB3;
    border-bottom: 1px solid #15428b;
    
}


.uiMenu li{
 
 display: inline-block;
    list-style-type: none;
    padding: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: normal;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    
     /* IE 7- fixes */
    *display: inline;
    *zoom: 1;
    
}



body{
 
 
 background-color: #fff;
    font-size: 11px;
    font-family: Tahoma; 
}

.lihover{
    background-color: #fff;
    color: #000 !important;
    border-top: 1px solid #15428b !important;
    border-right: 1px solid #15428b !important;
    border-left: 1px solid #15428b !important;
    
}

.flyoutFloat {
     border-top: 1px solid #15428b !important;
}

.flyout > li{
 position: relative;
  
}

.flyout{

 border-bottom: 1px solid #15428b;
    border-right: 1px solid #15428b;
    border-left: 1px solid #15428b;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    z-index: 100;
    padding: 5px;
  visibility:hidden;
     
}

.flyout li{
 list-style-type: none;  
     padding: 2px 5px; 
    border: 1px solid transparent;
}

.flyout li:hover{
 
 border: 1px solid #ccc !important;
 background-color: yellow !important; 
  cursor: pointer;  
}

JavaScript

$(document).ready(function() {
    $('.uiMenu').find('ul').hide();
    $('.uiMenu > li').each(function() {
       
        
       
        $(this).data('header', true);
        doMenu(this);
    });
    
});

function doMenu(li) {

    var flyout = createMenuItem(li);

    //$(li).data('flyout', flyout);
    $(li).hover(function() {
        doMainOn(li);
    }, function(e) {
        doMainOff(li);
    });
    if (flyout) $(flyout).hover(function(e) {
        doFlyoutOn(li, flyout);
    }, function(e) {
        doFlyoutOff(li, flyout);
    });

}


function doMainOn(li) {
    var flyout = $(li).data('flyout');
    $(flyout).css('visibility', 'visible');
    $(li).data('ishovering', true);

    if ($(li).data('header')) $(li).addClass('lihover');
}

function doMainOff(li) {
    $(li).data('ishovering', false);
    setTimeout(function() {
        var flyout = $(li).data('flyout');
        if (!$(flyout).data('ishovering')) {
            $(flyout).css('visibility', 'hidden');

            if ($(li).data('header')) $(li).removeClass('lihover');
        }
    }, 25);
}

function doFlyoutOn(li, flyout) {
   // console.log('flyouton');

    $(li).data('childflyout', true);
    $(flyout).data('ishovering', true);
}

function doFlyoutOff(li, flyout) {
   // console.log('flyoutoff');

    $(li).data('childflyout', false);

    setTimeout(function() {
        //console.log('flyoutofftimer');

        $(flyout).data('ishovering', false);


        var cancel = false;

        $(flyout).find('li').each(function() {

            var t = $(this).data('flyout');
            if (t && t.data('ishovering')) {
                cancel = true;
                return;
            }
        });

        if (!$(li).data('ishovering') && !cancel) {
            $(flyout).css('visibility', 'hidden');
            if ($(li).data('header')) $(li).removeClass('lihover');
            $(li).trigger('mouseleave');
        }
    }, 25);
}


function createMenuItem(li) {


    var html =...