JSFiddle - React, Tailwind, and code Playground

by Shahidiqbal390

HTML

<div class="Menus">
    <ul class="ParentUL">
        
    </ul>
</div>

CSS

.Menus ul {
    list-style: none;
}

    .Menus ul li {
        float: left;
        margin-right: 20px;
    }

        .Menus ul li ul {
            display: none;
            padding-left: 0 !important;
            position: absolute;
            z-index: 999;
        }

            .Menus ul li ul li {
                float: none;
            }

JavaScript

$(document).ready(function(){
    var html="<li class='ParentLI'>";
    html+="<a href='#'>Menu 1</a>";
    html +="<ul>";
    html +="<li>";
    html +="<a href='#'>Item 1</a>";
    html +="</li>";
    html +="<li>";
    html +="<a href='#'>Item 2</a>";
    html +="</li>";
    html +="<li>";
    html +="<a href='#'>Item 3</a>";
    html +="</li></ul></li>";
    
    html+="<li class='ParentLI'>";
    html+="<a href='#'>Menu 2</a>";
    html +="<ul>";
    html +="<li>";
    html +="<a href='#'>Item 1</a>";
    html +="</li>";
    html +="<li>";
    html +="<a href='#'>Item 2</a>";
    html +="</li>";
    html +="<li>";
    html +="<a href='#'>Item 3</a>";
    html +="</li></ul></li>";
    $('.ParentUL').html(html);
    
    $('.ParentUL .ParentLI a').mouseover(function(){
    $(this).parent().find('ul').slideToggle();
    });
    
    $('.ParentUL .ParentLI a').mouseleave(function(){
    $(this).parent().find('ul').slideToggle();
    });
});