JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="nav">
    <ul>
        <li class="current_page_item"><a href="#">List 00</a></li>
        <li><a href="#">List 01</a></li>
        <li><a href="#">List 02</a></li>
        <li><a href="#">List 03</a></li>
        <li><a href="#">List 04</a></li>
        <li><a href="#">List 05</a>
            <ul class='children'>
                <li><a href="#">List 05-01</a></li>
                <li><a href="#">List 05-02</a></li>
                <li><a href="#">List 05-03</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

#nav ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#nav a {
    background-color: #395f2d;
    border: 0;
    color: #ffffff;
    display: block;
    line-height: 1;
    margin: 0px 0 5px -15px;
    padding: 4px 0px 5px 20px;
    width: 200px;
}

#nav .current_page_item>a{
    width: 225px !important;
}

#nav li:hover>a,
#nav .current_page_item>a{
    color: #dcbe87;
}

#nav .children{
    display: none;
    margin-left: 35px;
}

JavaScript

$(document).ready(function() {
    $("#nav a").hover(function() {
        $(this).animate({width: 225}, 300);
    }, function() {
        $(this).animate({width: 200}, 300);
    });

    $("#nav li").hover(
    function() {
        $(this).find("ul:first").show(300);
    }, function() {
        $(this).find("ul:first").hide(300);
    });
});