JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<ul>
    <li><a href="#home">Menu1</a> 
        <!-- not working -->
        <ul>
            <li><a href="#home">Menu1</a>
            </li>
            <li><a href="#news">Menu2</a>
            </li>
            <li><a href="#contact">Menu3</a>
            </li>
            <li><a href="#about">Menu4</a>
            </li>
        </ul>
    </li>
    <li><a href="#news">Menu2</a>
    </li>
    <li><a href="#contact">Menu3</a>
    </li>
    <li><a href="#about">Menu4</a>
    </li>
</ul>

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    display:inline-block;
}
a {
    display:block;
    width:60px;
    background-color:#dddddd;
}
li ul{
    position:absolute;
    display:none;
}
li ul li{
    display:block;
}
li:hover ul{
    display:block;
}