JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navcontainer">
        <ul>
 
            <li>
                <a href="#">Eggs</a>
 
                <ul>
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
 
                    <li><a href="">sub menu</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#navcontainer{
background:#222;
margin: 0 auto;
    width: 600px;
}
#navcontainer ul{
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
}
#navcontainer ul li{
display:inline;
/*position:relative;*/
}
#navcontainer ul li a{
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover{
background:#999;
}
#navcontainer ul ul{
position:absolute;
left:0;
top:46px;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li{
float:none;
}
#navcontainer ul ul li a{
text-align:left;
}
#navcontainer ul li:hover ul{
display:block;
}