JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

JavaScript

$(document).ready(function(){
    $('#mainnav li ul').hide()
    $('#mainnav li').on('mouseenter', function(){
        $(this).css('background','yellow');
        $(this).find('ul').slideDown(700);
    });
    $('#mainnav li').on('mouseleave', function(){
        $(this).css('background','none');
        $(this).find('ul').slideUp(700);
    });
});