JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav-list">
        <li><a href="">Test</a></li>
        <li><a href="">THE ASSOCIATION</a>
            <ul class="sub-menu">
                <li>
                   <a>WHO WE ARE</a>
                </li>
            </ul>
        <li><a href="">CONTACTS</a></li> 
        <li><a href="">PRODUCTS</a>
            <ul class="sub-menu">
                <li>
                   <a>SHOES</a>
                </li>
                <li>
                   <a>UMBRELLAS</a>
                </li>
            </ul>          
   </ul>

CSS

#nav-list{
float:left;
}

#nav-list li
{position:relative;
display:inline ;
padding:4px 18px 4px 0 ;
}

.sub-menu
{
float:right;
display:none;
}

ul#nav-list li:hover ul.sub-menu
{ 
background:#ffffff;
position:absolute;
top:20px;
    left:200px;
z-index:9999;
display: block;

}