JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">About 1</a></li>
    <li><a href="">About link 2</a></li>
    <li><a href="">About 3</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Product 1</a></li>
    <li><a href="">Product 2</a></li>
    <li><a href="">Product 3</a></li>
    <li><a href="">Product 4</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Contact 1</a></li>
    <li><a href="">Contact 2</a></li>
    <li><a href="">Contact 3</a></li>
    </ul>
  </li>
</ul>

CSS

ul {   
    font-family: Arial, Verdana;   
    font-size: 14px;   
    margin: 0;   
    padding: 0;   
    list-style: none; }
ul li { display: block;   position: relative;  float: left; }
li ul { display: none; }
ul li a {   
    display: block;   
    text-decoration: none;   
    color: #ffffff;   
    border-top: 1px solid #ffffff;   
    padding: 5px 15px 5px 15px;   
    background: #2C5463;   
    margin-left: 1px;   
    white-space: nowrap; 
}
ul li a:hover { background: #617F8A; } 
li:hover ul {   display: block; /*This opens the hidden ul list*/   position: absolute; } 
li:hover li {   float: none;   font-size: 11px; } 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; }