JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav"> 
  <li> 
     <span class='toplink'>Item 1</span> 
     <ul class="subnav subnav-1"> 
     <li><a href=''>sub nav 1</a></li>
     <li><a href=''>sub nav 2</a></li>
     </ul> 
  </li> 
  <li> 
     <span class='toplink'>Item 2</span> 
     <ul class="subnav subnav-1"> 
        <li><a href=''>sub nav 3</a></li>
        <li><a href=''>sub nav 4</a></li>
  </ul> 
  </li> 
  <li> 
     <span class='toplink'>Item 3</span> 
     <ul class="subnav subnav-1"> 
        <li><a href=''>sub nav 3</a></li>
        <li><a href=''>sub nav 3</a></li>
    </ul> 
  </li> 
</ul>

CSS

#nav li {
    float:left;
    padding:0 15px;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    margin-left: -10px;
}

#nav li:hover ul {
    left: auto;
}