JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mynavbar">
<!-- REPLACE each "placeholder.html" URL below with the specific page you want
      the user to go to when the given submenu item is clicked.  -->

<!-- Products sub-menu, shown as needed  -->
<ul id="products_submenu">
  <li><a href="placeholder.html" id="t1" class="navbartitle">Products</a></li>
  <li><a href="placeholder.html">Flying Cars</a></li>
  <li><a href="placeholder.html">Super Squirters</a></li>
  <li><a href="placeholder.html">Sling Shots</a></li>
  <li><a href="placeholder.html">Bamboozlers</a></li>
  <li><a href="placeholder.html">Kazoos</a></li>
</ul>

<!-- Services sub-menu, shown as needed  -->
<ul id="services_submenu">
  <li><a href="placeholder.html" id="t2" class="navbartitle">Services</a></li>
  <li><a href="placeholder.html">Toy Design</a></li>
  <li><a href="placeholder.html">Market Research</a></li>
  <li><a href="placeholder.html">IP Consulting</a></li>
  <li><a href="placeholder.html">Licensing</a></li>
</ul>

<!-- Fun Stuff sub-menu, shown as needed  -->
<ul  id="funstuff_submenu" class="submenu" >
  <li><a href="placeholder.html" id="t3" class="navbartitle">Fun Stuff</a></li>
  <li><a href="placeholder.html">Toys We Designed</a></li>
  <li><a href="placeholder.html">Press Ravings</a></li>
  <li><a href="placeholder.html">Our Blog</a></li>
</ul>  

<!-- About Us sub-menu, shown as needed  -->
  
<ul id="aboutus_submenu" class="submenu">
  <li><a href="placeholder.html" id="t4" class="navbartitle">About Us</a></li>
  <li><a href="placeholder.html">Team</a></li>
  <li><a href="placeholder.html">Investors</a></li>
  <li><a href="placeholder.html">Partners</a></li>
  <li><a href="placeholder.html">Careers</a></li>
  <li><a href="placeholder.html">Our Blog</a></li>
</ul>


<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed  -->
<ul id="contact_submenu" class="submenu" style="width:200px;">
      <li><a href="placeholder.html" id="t5" class="navbartitle">Contacts &amp; Directions</a></li>
      <li><a...

CSS

.mynavbar {
  position:relative;
  z-index:10;
  height: 1.8em;
  margin:0; padding:0;
  background-color: #666633;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.mynavbar > ul{
    display:inline-block;
    width:120px;
    padding:0; margin:0;
    vertical-align:top;
    list-style-type:none;
}

.mynavbar > ul > li{
    display:block; margin:0; padding:0;
}
.mynavbar > ul > li:not(:first-child){
    display:none;
    position:relative;
    z-index:10;
}
.mynavbar > ul:hover > li{
    display:block;
}
.mynavbar > ul li > a{
  display: block;
  color: #eee;
  background-color: #666633;  
  padding: .2em 3em .05em 1em;
  margin:0;
  text-decoration: none;
  border-bottom: #447755 dotted 1px;
}

.mynavbar ul li a:link { }
.mynavbar ul li a:visited { }
.mynavbar ul li a:hover{
  color: #c6e8e2; /* text color for submenu items */
  background-color: #447755;
  border-bottom: #447755 dotted 1px;
}
.selecthack > select{
    position:relative;
    left:100px;
    top:20px;
}
.mynavbar:hover ~ .selecthack > select:focus{
    display:none;    
}