JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<nav id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Terbaru</a>
            <ul>
                <li><a href="#">Something</a></li>
                <li><a href="#" class="active">Mengungkap Cara Kerja Otak Manusia</a></li>
                <li><a href="#">Something</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

#nav li {
    list-style:none;
    display:inline;
    position:relative;
}

#nav li ul {
    position:absolute;
    top:100%;
    left:0;
    width:200px;
    display:none;
}

#nav li ul li {
    display:block;
}

#nav li:hover ul {
    display:block;
}

#nav a.active {
    color:red;
    font-weight:bold;
}

JavaScript

$(function() {
    $('#nav li a.active').parents('li').children('a').addClass('active');
});