JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
<li>What's new?
    <ul class="active">
        <li><a href="#">Weekly specials</a></li>
        <li><a href="#">Last night's pics!</a></li>
        <li><a href="#">Users' comments</a></li>
    </ul>
</li>
<li>Member extras
    <ul>
        <li><a href="#">Premium Celebrities</a></li>
        <li><a href="#">24-hour Surveillance</a></li>
    </ul>
</li>
<li>About Us
    <ul>
        <li><a href="#">Privacy Statement</a></li>
        <li><a href="#">Terms and Conditions</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</li>
</ul>

JavaScript

$(document).ready(function(){
         
        $('#menu>li>ul>li').hide();

        
$('#menu>li').click(function(e){e.stopPropagation();});


        $('#menu>li').hover(
                 
                function(event){
                     event.preventDefault();
                    $(this).find('ul>li').stop().slideDown();
                },

                function(event){
                   event.preventDefault();
                    $(this).find('ul>li').stop().slideUp();
                }
        );

    });