JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
  <div class="container">
    <ul id="top-nav">
      <li class= ""><a class="first" href="#">UCMST</a></li>
      <li class=""><a href="#UCMST">About Us</a>
            <ul style="box-shadow: 0px 5px 10px #000;">
                <li><a href="#UCMST">Who We Are</a></li>
                <li><a href="#ContactUs">Our Testing Profile</a></li>
                <li><a href="#HonorAndAchievement">Honor and Achievement</a></li>

            </ul>

      </li>
       <li class=""><a href="#ContactUs">Contact Us</a></li>
       <li class=""><a href="#Classes">Classes</a></li>
       <li class="" style="width: 250px;"><a href="#ThunderChickens">Thunder Chickens</a></li>
   </ul>
  </div>
 </div>

CSS

.nav{
     background-color:#ffffff;
     margin-bottom: 10px;
     margin-right: auto;
     margin-left: auto;
     z-index: 1;
     text-align: center;
   }
.nav .container {
   margin: 30px auto 10px auto;
   text-align: center;
 }
#top-nav {
 margin: 10px auto 10px auto;
 padding: 0;
 list-style: none;
 height: 45px;
 width:930px;
 overflow: hidden;
 position: absolute;
 z-index: 999;
 background-color: #ffffff;
 box-shadow: 3px 3px 9px 3px #000,
    -3px 0px 9px 3px #000;

}
#top-nav:hover {  
 overflow: visible;
}

#top-nav li {
 text-align: center;
 float: left; 
 text-transform: uppercase;
 font: 1.5em  sans-serif;  
 width: 170px;
 padding-bottom: 0px;
}
#top-nav li a {
 display: block;
 text-decoration: none;
 font-weight: normal;
 text-align: center;
 color: #acacac;
 border-right: 1px solid #acacac; 
 padding-top: 12px;
 padding-bottom: 5px;
 height: 45px;
}
#top-nav li:first-child a {
 border-left: 1px solid #acacac; 
}
#top-nav > li a:hover {
 color: #ffffff;
 background: #212021;
 border: 1px solid #212021;
 height: 50px;
}
#top-nav li a.active {
 color: #ffae00;
}
#top-nav li ul {
 list-style-type: none;
 padding: 10px 0 10px 0;
 margin: 0;
 height: 150px;
 background-color: #ffffff;
}
#top-nav li ul li {
 font-size: 13px;
 padding: .3em;
 float: none;    
}
#top-nav li ul li a { 
 height: auto !important;
 border: none !important;
 padding: 3px;
}
#top-nav li ul li a:hover {
 color: #ffae00;
 background: transparent;
}