JSFiddle - React, Tailwind, and code Playground

by Rifan Hidayat

HTML

<nav id="nav">
    <ul>
        <li><a href="#">Beranda</a>
        </li>
        <li><a href="#">Profil</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Jurnal</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Komentar</a>

            <ul>
                <li><a href="#">Submenu 1</a>
                </li>
                <li><a href="#">Submenu 2</a>
                </li>
                <li><a href="#">Submenu 3</a>
                </li>
                <li><a href="#">Submenu 4</a>
                </li>
            </ul>
        </li>
        <li class="sc">
            <form>
                <input type="text" />
            </form>
        </li>
    </ul>
</nav>

CSS

#nav {
    z-index:999;
    background:#2A497E;
    width:98.5%;
    color:white;
    font:normal 10px Arial, Sans-Serif;
    text-transform:uppercase;
    -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    border-top:2px solid #3B68B5;
    border-bottom:2px solid #3B68B5;
}

#nav ul {
    margin:0px 0px;
    padding:0px 0px;
    height:30px;
}
#nav li {
    margin:0px 0px;
    padding:0px 0px;
    float:left;
    display:inline;
    list-style:none;
    position:relative;
    border-top:1px solid #2A497E;
    -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
#nav a {
    display:block;
    padding:0px 15px;
    line-height:30px;
    text-decoration:none;
    background-color:#2A497E;
    color:white;
    border-bottom:1px solid #3B68B5;
}
#nav a:hover {
    background-color:#37f;
    -webkit-transition:all 1s ease-Out;
    -moz-transition:all 1s ease-Out;
    -ms-transition:all 1s ease-Out;
    -o-transition:all 1s ease-Out;
    transition:all 1s ease-Out;
}
#nav a:active {
    background-color:#11d;
}
#nav li ul {
    width:180px;
    height:auto;
    position:absolute;
    top:100%;
    left:0px;
    z-index:10;
    background-color:#000;
    display:none;
    -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);
}

#nav li li {
    display:block;
    float:none;
}
#nav li.sc {
    float:right;
}
#nav a, #nav li.sc form {
    display:block;
    padding:0px 10px;
   ...

JavaScript

$(function () {
    $('#nav li').hover(function () {
        $(this).children('ul').slideDown(500, "easeOutBounce");
    }, function () {
        $(this).children('ul').slideUp(500, "easeOutExpo");
    });
});