JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
          <li><a href="#" tabindex="1">Home</a>
                 <ul class="sub">
                     <li><a href="about">About Us</a></li>
                     <li><a href="page1">Some Page</a></li>
                     <li><a href="page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#" tabindex="1">Products</a>
                 <ul class="sub">
                     <li><a href="about">About Us</a></li>
                     <li><a href="page1">Some Page</a></li>
                     <li><a href="page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#" tabindex="1">Support</a>
                 <ul class="sub">
                     <li><a href="about">About Us</a></li>
                     <li><a href="page1">Some Page</a></li>
                     <li><a href="page2">Another Page</a></li>
                 </ul>
          </li>
     </ul>

CSS

#nav,#nav ul{list-style:none;width:200px;padding:0;}
#nav ul{position:relative;z-index:-1;}
#nav li{position:relative;z-index:1;}
#nav ul li{margin-top:-25px;}
#nav li a{background-color:#fff;color:#000;display:block;line-height:25px;outline:0;text-decoration:none;}
#nav a:focus ~ ul li,#nav a:active ~ ul li,#nav ul:hover li{margin-top:0;}