JSFiddle - React, Tailwind, and code Playground

by Avijit Kumar

HTML

<div id="menu">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">test</a>
                <ul>
                    <li><a href="#">drop1</a>
                    </li>
                    <li><a href="#">drop2</a>
                    </li>
                    <li><a href="#">drop3</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">test</a>
                <ul>
                    <li><a href="#">drop1</a>
                    </li>
                    <li><a href="#">drop2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#menu {
        height: 30px;
        background-color: #26C7FF;
        margin-left: 0;
        margin-right: 0;
    }
    
    #menu li li:hover {
        background-color: yellow;
        cursor: pointer;
    }
    
    #menu ul,
    #menu li {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: center;
        position: relative;
    }
    
    #menu li {
        float: none;
        width: 120px;
        list-style-type: none;
        line-height: 30px;
        text-align: center;
        display: inline-block;
    }
    
    #menu li ul {
        position: absolute;
        background-color: #26C7FF;
        display: none;
        left: 0;
        right: 0;
    }
    
    #menu li li {
        float: none;
        padding: 2px;
    }
    
    #menu a {
        color: #000;
        text-decoration: none;
    }

JavaScript

$(document).ready(function() {

        $("#menu li").hover(function() {

            $(this).children(":hidden").slideDown();



        }, function() {

            $(this).parent().find("ul").slideUp();


        });



    });