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="">1111111</a>
                                </p>
                                <p class="" style="display: none;">
                                    <a href="">22222</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="">3333333</a>
                                </p>
                                <p class="" style="display: none;">
                                    <a href="">444444</a>
                                </p>
                                <p class="" style="display: none;">
                                    <a href="">555555555</a>
                                </p>
                            </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:...

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(){
            $('#loading').show()
            setTimeout(function(){
                $('#loading').hide()
                $this.find('.main_in_menu').stop(true,true).hide();
                $span.stop().animate({},0);
            }, 1500)
        });
    });
});