JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
    <div id="access-navi" class="no-j" role="navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="sub"><a href="#">Code</a>
                    <ul>
                        <li><a href="#">Html Css</a></li>
                        <li><a href="#">Java</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Php</a></li>
                    </ul>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
</body>
</html>

CSS

#access-navi    { height:50px; }
#access-navi ul    { outline:none; }
#access-navi ul li    { display: inline; }
#access-navi ul li    a
                { outline:0; background-color: #101010; border-bottom: 5px solid #101010; color: #DDDDDD; display: block; 
                    float: left; margin-right: 30px; padding: 10px 30px 5px; text-decoration: none;}
#access-navi .sub li
                { display:none; }

JavaScript

var $j = jQuery.noConflict();
$j(function()    {
var delay = 100;
    var fade = 400;
    var inner="";
    $j('#access-navi .sub > a').toggle(function(){
        
        inner=$j(this).parent().find('ul li');
        inner.each(function(i){
            $j(this).delay(i*delay).fadeIn(fade);
        });
        
    },function(){
        inner.fadeOut(fade/2);
    });
});