JSFiddle - React, Tailwind, and code Playground

by Brando Mewo

HTML

<nav id='denzdii'>
    <ul>
        <li class='depan'><a href='/'>Beranda</a></li>
        <li><a href='#'>Title 2</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 3</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 4</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
    </ul>
</nav>

CSS

body {padding:10px;
    background-color:#efefef;
    background-size: cover;
    font: 13px 'trebuchet MS',Arial,Helvetica;
}
#denzdii{background:#156AA6;overflow:hidden;}
#denzdii ul{float: left;height:30px;list-style:none;overflow:hidden;margin:0;padding:0}
#denzdii li{float:left;text-shadow:1px 1px 2px #0066B3;padding:0}
#denzdii li a{background:#156AA6;color:#eee;display:block;font-weight:400;line-height:30px;border-left:1px solid #4B88B3;border-right:1px solid #043457;text-align:center;text-decoration:none;margin:0;padding:0 25px}
#denzdii li.depan a{border-left:none}
#denzdii li ul{background:#156AA6;height:auto;border:0;position:absolute;width:225px;z-index:80;box-shadow:0 1px 5px #034257;display:none;margin:0;padding:0}
#denzdii li li{display:block;float:none;width:225px;border-top:1px solid #4B88B3;border-bottom:1px solid #043457;margin:0;padding:0}
#denzdii li:hover li a{background:#156AA6}
#denzdii li ul a{display:block;height:30px;font-size:12px;font-style:normal;text-align:left;margin:0;padding:0 10px 0 15px}
#denzdii li a:hover,#denzdii li:hover>a{color:#fff}
#denzdii li:hover ul.hidden{display:block}

JavaScript

$('#denzdii li ul').removeClass('hidden');
    $('#denzdii li').hover(function() {
        $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, function() {
        $('ul', this).slideUp(600, 'easeInExpo');
    });