JSFiddle - React, Tailwind, and code Playground

by SebastianPataneMasuelli

HTML

<div id="menu">
    <ul>
        <li>
            <a>Item1</a>
        </li>
        <li>
            <a>Item2</a>
            <ul>
                <li><a href="#">item2-1</a></li>
                <li><a href="#">item2-2</a></li>
                <li><a href="#">item2-3</a></li>
            </ul>
        </li>
        <li>
            <a>Item3</a>
            <ul>
                <li><a href="#">item3-1</a></li>
                <li><a href="#">item3-2</a></li>
                <li><a href="#">item3-3</a></li>
            </ul>
        </li>
        <li>
            <a>Item4</a>
        </li>
    </ul>
</div>

CSS

#menu {
    display:block;
    margin:120px auto 20px;
    border:1px solid #222;
    position:relative;
    background-color:#6a6a6a;
    font:16px Tahoma, Sans-serif;
}  
#menu ul {
    padding:0;
    margin:0;
}  
#menu li {
    position:relative;
    float:left;
    list-style-type:none;
}  
#menu ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}  
#menu li a {
    display:block;
    padding:10px 20px;
    border-left:1px solid #999;
    border-right:1px solid #222;
    color:#eee;
    text-decoration:none;
}  
#menu li a:focus {
    outline:none;
    text-decoration:underline;
}  
#menu li:first-child a {
    border-left:none;
}  
#menu li.last a {
    border-right:none;
}  
#menu a span {
    display:block;
    float:right;
    margin-left:5px;
}  
#menu ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#6a6a6a;
    top: -80px;
}  
#menu ul ul li {
    float:none;
}  
#menu ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:14px;
}

a:hover {
    cursor: pointer;
}

JavaScript

(function($){

    $("#menu").find("li").each(function() {  
        if ($(this).find("ul").length > 0) {  

            $(this).mouseenter(function() { 
                $(this).find("ul").stop(true, true).show("slide", { direction: "down" });  
            });  

            $(this).mouseleave(function() {  
                $(this).find("ul").stop(true, true).hide("slide", { direction: "down" }, 1000);  
            });  
        }  
    });
    
})(this.jQuery);