JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="menu">
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">item 1
          <ul class="dropdown-menu_s">
            <li class="dropdown-submenu">
              <span>LoremLorem</span>
              <ul class="dropdown-menu_delay">
                <li>Lorem ipsum dolor ipisicing</li>
                <li>sit amet, consectetur ad</li>
                <li>ovident, vitae, ex eaque,</li>
                <li>voluptate qui omnis quis velit</li>
                <li>sint ipsa cumque deleniti quo</li>
                <li>quod ratione magni eum consequuntur</li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>ipsumipsum</span>
              <ul class="dropdown-menu_delay">
                <li>quodquod</li>
                <li>rationeratione</li>
                <li>magnimagni</li>
                <li>eumeum</li>
                <li>consequunturconsequuntur</li>
                <li>quoquo</li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>dolordolor</span>
              <ul class="dropdown-menu_delay">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>ipisicingipisicing</span>
              <ul class="dropdown-menu_delay">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>omnisomnis</span>
              <ul class="dropdown-menu_delay">
                <li></li>
                <li></li>
                <li></li>
   ...

CSS

.menu {
background: gray;
}

li {
  cursor: pointer;
}

.dropdown-menu {
  display: flex;
  list-style-type: none;
}

.dropdown-submenu, .dropdown-menu-item {
  background: white;
  margin-left: 10px;
}

.dropdown-menu_s, .dropdown-menu_delay {
  list-style-type: none;
  padding: 0;
}

.dropdown-menu-item {
  position: relative;
}

.dropdown-submenu {
  padding: 10px;
}

.dropdown-menu_delay {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  background: red;
}

.dropdown-menu_delay li {
  padding: 10px;
  background: white;
}

.dropdown-submenu.active {
  color: blue;
  border: 1px solid blue;
}

.dropdown-submenu.active .dropdown-menu_delay {
  display: block;
}

JavaScript

$(".dropdown-submenu").on("mouseenter", function(){
    let a = $(this);
    timeout = setTimeout (function(){
      a.addClass("active"),
      a.find('.dropdown-menu_delay').show(500);
    }, 800);
  }),
  $(".dropdown-submenu").on("mouseleave", function(){
    clearTimeout(timeout);
    let a = $(this);
    setTimeout (function(){
    if(a.hasClass("active")){
      a.removeClass("active"),
      a.find('.dropdown-menu_delay').hide(500);
    }}, 800);
  });