JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/css.css">
  <link rel="shortcut icon" href="">
</head>
  <body>
    <title> Learn Event Handeling </title>
    <nav>
      <ul class="parent">
        <li>Menu 1</li>
        <ul class="child">
          <li>Sub 1.1</li>
          <li>Sub 1.2</li>
          <li>Sub 1.3</li>
        </ul>
        <li>Menu 2</li>
        <ul class="child">
          <li>Sub 2.1</li>
          <li>Sub 2.2</li>
          <li>Sub 2.3</li>
        </ul>
        <li>Menu 3</li>
        <ul class="child">
          <li>Sub 3.1</li>
          <li>Sub 3.2</li>
          <li>Sub 3.3</li>
        </ul>
        <li>Menu 4</li>
        <li>Menu 5</li>
      </ul>
    </nav>

  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

ul.parent > li {
  float: left;
  width: 20%;
  text-align: center;
  padding: 10px;
  background-color: darkgrey;
  color: white;
  border-right: 1px solid white;

}

ul.child > li {
  display: none;
}

JavaScript

$(document).ready(function(){
    $('ul.parent > li').hover(function(){
        $('ul.parent > li').find('ul.child').stop().show();
        }, function(){
        $('ul.parent > li').find('ul.child').stop().hide();
    });
});