JSFiddle - React, Tailwind, and code Playground

by WinKiFlyMe

HTML

<div id="menu" class="menu-dropdown">
                <ul>
                    <li>
                        <a href="">Home</a>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">Product</a></li>
                            <li><a href="">Contract</a></li>
                            <li><a href="">Location</a></li>
                            <li><a href="">Help</a></li>
                        </ul>
                    </li>
                    <li><a href="">Product</a></li>
                    <li><a href="">Contract</a></li>
                    <li><a href="">Location</a></li>
                    <li><a href="">Help</a>
                    </li>
                </ul>
                </div>

CSS

ul{
    margin:0;
    padding:0;
}
.menu-dropdown ul li{
    display:inline-block; 
    vertical-align:top;
    position:relative;
}
.menu-dropdown ul li ul li{
    display:block;
}
.menu-dropdown ul li ul{
    display:none;
}
.menu-dropdown li:hover >ul{
    position:absolute;
    top:100%;
    left:0;
    display:block;
    z-index:10;
}