JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-wrap">
    <ul class="mainz">
     <li class="1">item 1</li>
     <li class="2">item 2</li>
    </ul>
    
    <div class="subz">
     <ul class="1">
      <li>1 sub item 1</li>
      <li>1 sub item 2</li>
     </ul>
    
     <ul class="2">
      <li>2 sub item 1</li>
      <li>2 sub item 2</li>
     </ul>
    </div>
</div><!-- /END #nav-wrap -->

CSS

.mainz, .subz ul {
    display: block;
    float: left;
    list-style: none;
    clear: both;
}
.mainz {
    background: #666;
}
.subz ul {
    background: #999;
    margin-top: -1px;
}
li {
    float: left;
    padding: .5em;
}

JavaScript

$( document ).ready( function () {
    var $ul = $( '.subz ul' ).hide();
    $( '.mainz li' ).on( 'mouseenter', function(event){
            $ul.hide().eq( $( this ).index() ).show();
    });
    $( '#nav-wrap' ).on( 'mouseleave', function(event){
        $ul.hide();
    });
});