JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul class="nav">
    <li><a href="">About</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
        </ul>
    </li>
    <li><a href="">New</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Products</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding-left:0;
}
ul > li{
    position:relative;
}

a{
    text-decoration:none;
    color:lightgreen;
}

ul > li > a{
    font-size:20px;
}

ul ul{
    display:none;
    position:absolute;
    top:100%;
    padding:5px 10px;
    background-color:#ccc;
    z-index:2;
    list-style:none;
}



ul ul a{
    color:white;
}

JavaScript

$('.nav li').mouseenter(function(){
    $(this).children('ul').stop().slideDown(300);
});
$('.nav li').mouseleave(function(){
    $(this).children('ul').stop().slideUp(300);
});