JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropnav">
    <ul>
        <li id="main"><a href="#">One</a></li>
        <li id="main"><a href="#">Two</a>
            <ul style="backgroun-clor:red;">
            <li style="backgroun-clor:red;"><a href="#">Two A</a></li>
            <li style="backgroun-clor:red;"><a href="#">Two B</a></li>
            <li style="backgroun-clor:red;"><a href="#">Two C</a></li>
            <li style="backgroun-clor:red;"><a href="#">Two D</a></li>
            </ul>            
        </li>
        <li id="main"><a href="#">Three</a></li>
        <li id="main"><a href="#">Four</a></li>
        <li id="main"><a href="#">Five</a></li>
    </ul>    
</div>

CSS

#dropnav {
    height:50px;
    width: 100%;
    text-decoration: none;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}
#dropnav ul {
    margin:0px;
    padding:0px;
    text-align: center;
}
#dropnav ul li {
    display:inline;
    float:left;
    list-style:none;
    margin-left:auto;
    position:relative;
    height:25px;
    width: 20%;
    font-size: 20px;
    font-family:'Cabin', Helvetica, Arial;
}
#dropnav ul li ul {
    margin:0px;
    padding:0px;
    display:none;
    position:relative;
    left:0px;
    z-index: 99;
    top:0px;
    padding-top: 50px;
}
#dropnav ul li:hover > ul {
    display:block;
    width:500px;
    left: -50%;
}
#dropnav ul li ul li:hover > a {
    color:#FFFFFF;
    text-decoration:none;
    display:block;
    width:500px;
    left: -50%;
}