JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-nav">
        <li><a href="#">Меню1</a></li>
        <li><a href="#">Меню2</a>
            <ul class="submenu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
        <li><a href="#">Testimonails</a>
            <ul class="submenu">
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
            </ul>
        </li>
        <li><a href="#">Меню4</a></li>
        <li><a href="#">Меню5</a></li>
    </ul>

CSS

.main-nav li {
    float:left;
    padding:10px;
    font-size:18px;
}
.submenu {
    background:orange;
    width:150px;
    display:none;
    position:absolute;
}
.submenu li {
    float:none;
    padding:0;
}
.submenu li a {
    display:block;
    padding:15px;
}
.submenu li a:hover {
    background:green;
}

JavaScript

$('.main-nav li').hover(function () {
         $(this).find('.submenu').fadeIn(100);
    }, function () {
        $(this).children('.submenu').fadeOut(100);  
    });