JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<ul class="MainMenu right">
  <li class="headlink"><a href="#">About us</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>
    <li class="headlink"><a href="#">products</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>
  <li class="headlink"><a href="#">solutions by firm type</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>
  <li class="headlink"><a href="#">solutions by business need</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>
  <li class="headlink"><a href="#">services</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>
  <li class="headlink left"><a href="#">contact us</a>
  <ul>
  <li><a href="#">sample link one</a></li>
    <li><a href="#">sample link two</a></li>
  <li><a href="#">sample link three</a></li>
  <li><a href="#">sample link four</a></li>
  <li><a href="#">sample link five</a></li>
  </ul>
  </li>

  </ul>

CSS

.MainMenu {
    position:absolute;
    left:10px;
    top:10px;}
.headlink {
    margin-right: 10px;
    display:inline-block;
    }

.MainMenu li{
position: relative;
}
 li.headlink ul { display: none; }
       li.headlink:hover ul { display: block; position: absolute; top: 20px; left: 0;}

a {text-decoration:none;}