JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
    <li>First Level
    <ul>
        <li>Second Level</li>
        <li>Second Level</li>
        <li>Second Level</li>
    </ul>    
    </li>
    <li>First Level
    <ul>
        <li>Second Level</li>
    </ul>    
    </li>
</ul>
</nav>

CSS

li > ul {display:none;}
ul > li {width:100px; float:left; padding:10px;}
.arrow:before {content: '->'}
.first:after {content: 'first!'}
.last:before {content:'last!'}

JavaScript

(function() { //equals to $(window).ready();
        
        // Navigation bar drop-down
        $("nav ul li").hover(function() {
            $(this).toggleClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function() {
            // Delay on hiding should go here
            $(this).find("ul").hide().animate({ opacity: 0 }, 200);
        });
    
    })();