JSFiddle - React, Tailwind, and code Playground

by Naeem Rind

HTML

<div id="wrapper">
        <div id="menu">
            <ul>
                <li><a href=""> Home</a></li>
                <li><a href=""> About</a></li>
                <li><a href=""> Gallery</a>
                    <ul class="one">
                        <li class="naeem"><a href="">NAEEM</a>
                            <ul class="two">
                                <li><a href="">AAAA</a></li>
                                <li><a href="">BBB</a></li>
                                <li><a href="">CCCC</a></li>
                                <li><a href="">EEEEE</a></li>
                            </ul>
                        </li>
                        <li><a href="">Sub 1</a></li>
                        <li><a href="">Sub 2</a></li>
                        <li><a href="">Sub 3</a></li>
                    </ul>
                </li>
                <li><a href=""> Contact</a></li>
            </ul>
        </div>
    </div>

CSS

#wrapper {
	width: 960px;
        height: 30px;
/*        border: 1px solid green;*/
        margin: 0 auto;
}
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            font-size: 14px;
        }
        #menu ul {
            list-style: none;
            background: #8d8d8d;
            position: relative;
        }
        #menu ul li {
            display: inline-block;
            height: 30px;
            width: 80px;
            text-align: center;
            line-height: 30px;
/*            border: 1px solid yellow;*/
        }
        #menu ul li:hover > a {
            background: deepskyblue;
        }
        #menu ul a {
            display: block;
/*            background: #2196f3;*/
            color: #000;
            text-decoration: none;
            line-height: 30px;
            transition: 0.3s;
        }
        #menu ul a:hover {
            background: deepskyblue;
            
        }
        #menu ul ul {
            position: absolute;
            display: none;
            border-bottom: 6px solid #ff8000;
            background: #004069;
            box-shadow: 2px 1px 5px #2f2f2f;
        }
        #menu ul ul li {
            width: 150px;
            display: block;
        }
        #menu ul ul ul {
            position: absolute;
            left: 150px;
            top: 0;
        }

JavaScript

$(document).ready(function(){
            $("#menu ul li").hover(
            function() {
                 $(this).find(".one").stop(true, false).slideDown(300)
            },
            function() {
                 $(this).find(".one").delay(1100).slideUp(400)
            });
        });
        $(document).ready(function(){
        $(".naeem").hover(
            function() {
                 $(this).find(".two").stop(true, false).slideDown(300)
            },
            function() {
                 $(this).find(".two").delay(1000).slideUp(400)
            });
        });