JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-menu">
    <ul>
        <li class="menuItem"><a href="#">Home</a>

        </li>
        <li class="menuItem"><a href="#">List 1</a>

            <div class="sub-menu">
                <ul>
                    <li><a href="list">List</a>

                    </li>
                    <li><a href="list">List</a>

                    </li>
                    <li><a href="list">List</a>

                    </li>
                    <li><a href="list">List</a>

                    </li>
                    <li><a href="list">List</a>

                    </li>
                </ul>
            </div>
        </li>
        <li class="menuItem"><a href="#">List 2</a>

            <div class="sub-menu">
                <ul>
                    <li><a href="list">List2</a>

                    </li>
                    <li><a href="list">List2</a>

                    </li>
                    <li><a href="list">List2</a>

                    </li>
                    <li><a href="list">List2</a>

                    </li>
                    <li><a href="list">List2</a>

                    </li>
                </ul>
            </div>
        </li>
        <li class="menuItem"><a href="#">Contact</a>

        </li>
    </ul>
</nav>

CSS

.main-menu {
    width: 100%;
}
.main-menu ul {
    float: left;
    position: relative;
    width: 100%;
}
.main-menu ul li {
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.main-menu ul li .sub-menu {
    background: none repeat scroll 0 0 #F1F1F2;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 20px 10px;
    position: absolute;
    top: 34px;
    width: 100%;
}

JavaScript

var sub_menu = $('.main-menu .sub-menu'); //select all sub menus
$('.main-menu > ul > li.menuItem').hover(function () {
    $this = $(this);
    if ($('.sub-menu:visible').size() > 0) {
        console.log('slidingup' + $('.sub-menu:visible').size());
        $('.sub-menu:visible').slideUp('slow', function () {
            $this.find('.sub-menu').slideDown('slow');
            console.log('done');
        });
    } else {
            $this.find('.sub-menu').slideDown('slow');
    }
}, function () {
    //   sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu:visible').slideUp('slow');
    //Do you need this?
});