JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">1 st
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
     </ul>
  <ul class="nav"> 2nd
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
     </ul>
  <ul class="nav"> 3rd
      <li>3</li>
      <li>3</li>
      <li>3</li>
      <li>3</li>
      <li>3</li>
      <li>3</li>
     </ul>
  <ul class="nav"> 4th
      <li>4</li>
      <li>4</li>
      <li>4</li>
      <li>4</li>
      <li>4</li>
      <li>4</li>
     </ul>

CSS

li{
    width:50px;
    height:20px;
    border:1px solid;
    background-color:grey;
    cursor:pointer;
}
ul{
    width:50px;
    height:20px;
    border:1px solid;
    background-color:green;
    cursor:pointer;
    
}

JavaScript

$(document).ready(function(){
     $("li").slideUp();
    });


     $(".nav").hover(function(e){
         $(this).children("li").slideDown();
          $("li").slideUp();
         e.stopPropogation();
     });