JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
      <ul>
        <li><a href="#">Sample</a></li>
        <li class="active"><a href="">Sample</a>
          <ul class="submenu submenu1">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li class="active"><a href="">Sub</a>
              <ul class="submenu submenu2">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li class="active"><a href="">Sub</a>
                  <ul class="submenu submenu3">
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li><a href="#">Sub</a></li>
                    <li class="active"><a href="">Sub</a></li>
                  </ul><!--// Inner Child 3 -->
                </li>
                <li><a href="#">Sub</a></li>
              </ul><!--// Inner Child 2 -->
            </li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
          </ul><!--// Inner Child 1 -->
        </li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
      </ul>
    </div><!--// end .menu -->

CSS

html,*{
margin: 0;
padding: 0;
font-size: 16px;
}

body{
background: #eee;
}
a{
text-decoration: none;
}
.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display: block;
  border-bottom: #ccc 1px solid;
  position: relative;
}
.menu ul li a{
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active > a,
.menu ul li a:hover{
  text-decoration: none;
  color: #fff;
  background: #ccc;
}


.menu ul li .submenu{
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
}

.menu ul li:hover > .submenu{
  display: block;
}

JavaScript

var timesArray = [];

$('.submenu').hover(
    function()
    {
        var id = jQuery.data(this);
        timesArray[id] = setTimeout(function() {
            //Показываем меню
            $(this).css({'display' :  'block'});
            timesArray[id] = "";
        }, 500);
    },
    function()
    {
        var id = jQuery.data(this);
        //Скрываем меню
        $(this).css({'display' :  'none'});
        if (timesArray[id])
        {
            clearTimeout(timesArray[id]);
        }
    }
);