JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="vicnav">
    <li><a href="#" >Home</a>
    <ul>
        <li><a href="#">Home Menu 1</a></li>
        <li><a href="#">Home Menu 2</a></li>
    </li>
    </ul>
    
    
    <li><a href="#" >Menu1</a>
    <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
    </li>
    </ul>
    
     <li><a href="#" >Menu2</a>
    <ul>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
    </li>
    </ul>   
 
</li>
</ul>

CSS

#vicnav { background:#CC0000; border-bottom: 5px solid #993300; border-top: 1px solid #e14d09; clear: both; overflow: hidden; } #vicnav ul { float: left; width: 100%; } #vicnav li { float: left; list-style-type: none; } #vicnav li a { background:#CC0000; color: #fff; display: block; font-size: 14px; padding: 5px 17px 5px 15px; position: relative; text-decoration: none; } #vicnav li a:hover { background:#990000; color: #fff; } #vicnav li li a { background: none; background-color: #9c1a03; border: 1px solid #990000; border-top-width: 0; color: #fff; font-size: 14px; padding: 5px 10px; position: relative; text-transform: none; width: 130px; } #vicnav li li a:hover { background: none; background-color: #CC0000; } #vicnav li ul { height: auto; left: -9999px; margin: 0 0 0 -1px; position: absolute; width: 160px; z-index: 9999; } #vicnav li:hover ul { left: auto; }