JSFiddle - React, Tailwind, and code Playground

HTML

<div style="top: 0px;" class="menu-box" id="menu-box">
     
<ul id="nav" class="menu">

<li>
<a href="" class="menu_top iii1">упквпкв</a>
<div style="display: none;" class="main_in_menu"><table class="tabl"><tbody><tr class="tabl lin">
<td style="border-right: 1px solid black ! important;" class="lvl3f tabl" valign="top"><p style="font-weight: bolder;text-transform: uppercase;">
<a href="">1</a>
</p><p class="" style="display: none;">
<a href="">2</a>
</p></td><td style="border-right: 1px solid black ! important;" class="lvl3f tabl" valign="top"><p style="font-weight: bolder;text-transform: uppercase;">
<a href="">3</a>
</p><p class="" style="display: none;">
<a href="">4</a>
</p><p class="" style="display: none;">
<a href="">5</a>
</p></td></td></tr></tbody></table></div></li>
<li>
<a href="" / class="menu_top iii1">рерар</a>
<div style="display: none;" class="main_in_menu"><table class="tabl"><tbody><tr class="tabl lin"><td style="border-right: 1px solid black ! important;" class="lvl3f tabl" valign="top"><p style="font-weight: bolder;text-transform: uppercase;">
<a href="">6</a>
</p><p class="" style="display: none;">
<a href="">7</a>
</p><p class="" style="display: none;">
<a href="">8</a>
</p><p class="" style="display: none;">
<a href="">9</a>
</p><p class="" style="display: none;">
<a href="">10</a>
</p></td></td></tr></tbody></table></div></li>


    </div>

CSS

a.menu_top {
    display: block;
    float: left;
    line-height: 16px;
    text-shadow: 0px 0px 0px #FFF;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0px;
    text-align: left;
    color: #FFF;
    padding: 10px;
    height: 30px;
    border-right: 1px solid !important;
}
.iii1 {
    border-left: 1px solid !important;
}
body a, body .site-title a, body .post-entry .post-entry-headline a {
    color: #214988;
}
a {
    color: #ED7C00;
    text-decoration: underline;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: medium none;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
}
ul, li {
    list-style: outside none none;
}
p, ul, ol, li, dl, address {
    word-wrap: break-word;
    font-size: 13px;
    text-align: left;
}
.menu-box ul {
    list-style-type: none;
    text-align: left;
}
.menu-box {
    background: transparent linear-gradient(to top, #000, #000) repeat scroll 0% 0%;
    float: left;
    min-height: 44px;
    padding: 0px 20px;
    position: relative;
   width: 250px;
    z-index: 109995;
}
.main_in_menu {
    position: absolute;
    display: none;
    top: 50px;
    left: 0px;
    background-color: #FFF;
    border-width: 0px 1px 1px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #FFF #FFF;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    z-index: 109995;
    padding: 20px 0px;
    box-shadow: 0px 1px...

JavaScript

$(function() {
 var $menu = $('#nav');
 $menu.children('li').each(function(){
 var $this = $(this);
 var $span = $this.children('a');
 $span.data('width',$span.width());

 $this.bind('mouseenter',function(){
 $menu.find('.main_in_menu').stop(true,true).hide();
 $span.stop().animate({},0,function(){
 $this.find('.main_in_menu').show();
 });
 }).bind('mouseleave',function(){
 $this.find('.main_in_menu').stop(true,true).hide();
 $span.stop().animate({},0);
 });
 });
 });

/*
var timeount = false;
$('.menu_top').hover(function () {  
    var $this = $(this);
    timeount = setTimeout(function () {
        $('.menu_top').next().show();
    }, 500);
}, function () {
    var $this = $(this);
    clearTimeout(timeount);
    timeount = setTimeout(function () {
        $('.menu-box').find('.menu_top').next().hide();
    }, 500);
});*/