JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <ul id="menu">
    <li><a href="aboutus.php">AboutUs</a>
      <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
      </ul>
    </li>

    <li><a href="itcourses.php">ITCourses</a>
      <ul class="sub">
        <li><a href="programmingcrs.php">Programming Courses</a></li>
        <li><a href="multimedia.html">Multimedia Courses</a></li>
        <li><a href="microsoftcrs.php">Microsoft Programs </a></li>
        <li><a href="unixlinuxcrs.php">Unix/Linux Courses</a></li>
        <li><a href="database.php">Database Programming</a></li>
        <li><a href="computertrouble.php">Computer Troubleshooting & Assembling</a></li>
        <li><a href="datacenterinfrastructer.php">DataCenter & Infrastructer</a></li>
        <li><a href="citrix.php">Citrix</a></li>
        <li><a href="fasttrackcrs.php">FastTrack Courses</a></li>
        <li><a href="kids.php">Courses For Students</a></li>
        <li><a href="studentrewards.html">Student Rewards</a></li>
      </ul>
    </li>
    <li><a href="certification.html">Certifications</a>
      <ul class="sub">
        <li><a href="itilv3.php">ITIL V3</a></li>
      </ul>
    </li>
    <li><a href="itproject.html">Projects</a>
      <ul class="sub">
        <li><a href="dotnetprojects.php">.Net Projects</a></li>
        <li><a href="javaprojects.php">Java Projects</a></li>
        <li><a href="j2ee.php">J2EE Projects</a></li>
        <li><a href="mobilewebsiteprojects.php">Mobile Website Projects</a></li>
      </ul>
    </li>

    <li><a href="services.php">Services</a>
      <ul class="sub">
        <li><a href="Products.php">Products</a></li>
        <li><a href="solutions.php">Solutions</a></li>
      </ul>
    </li>
   ...

CSS

ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
 }

 ul li {
   display: block;
   position: relative;
   float: left;
   text-align: center;
 }

 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: #1e7c9a;
   margin-left: 1px;
   white-space: nowrap;
 }

 ul li a:hover {
   background: #3b3b3b;
 }

 li:hover ul {
   display: block;
   position: absolute;
 }

 li:hover li {
   float: none;
   font-size: 11px;
 }

 li:hover a {
   background: #3b3b3b;
 }

 li:hover li a:hover {
   background: #1e7c9a;
 }

 .sub {
   width: auto;
 }

 .sub li {
   width: 100%;
   text-align: left;
 }