JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
        <ul>
            <li><a href="#nogo">Link 1</a>
                <ul>
                    <li><a href="#nogo">Link 1-1</a></li>
                    <li><a href="#nogo">Link 1-2</a></li>
                    <li><a href="#nogo">Link 1-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 2</a>
                <ul>
                    <li><a href="#nogo">Link 2-1</a></li>
                    <li><a href="#nogo">Link 2-2</a></li>
                    <li><a href="#nogo">Link 2-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 3</a>
                <ul>
                    <li><a href="#nogo">Link 3-1</a></li>
                    <li><a href="#nogo">Link 3-2</a></li>
                    <li><a href="#nogo">Link 3-3</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#menu{
padding:0;
margin:0;
overflow:hidden;
height:60px;
}
    #menu ul{
        padding:0;
        margin:0;
        position: relative;
    }
    #menu li{
        /* position: relative;   //remove this */
        float: left;
        list-style: none;
        margin: 0;
        padding:0;
    }

#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

#menu li a:hover{
background-color: red;
}

#menu ul ul{
    position: absolute;
    left: 0;
    top: 30px;
    visibility: hidden;
    width: 600px;
}

#menu ul li:hover ul{
visibility:visible;
display: inline;
}