JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MainNavBar">         
<ul id="nav">
    <li>
       <a class="MainNavButton" href="#">Home</a>
    </li>    
    <li><!-- Animals Menu -->
       <a class="MainNavButton" href="#">Animals</a><!-- hover over me to show the "animals" menu -->
       <div class="SubNavWrapper"> <!-- This is a wrapper that is absolutly positioned off the screen, until
                                             the "animals" link is hovered over -->                  
          <div class="SubNav"><!-- This is a parent with floating children -->
              <!-- this is a child that floats left -->
              <div class="SubNavSectionWrapper">                        
                <div class="SubNavSectionTitle">Fish</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Gold Fish</a></li>
                   <li><a href="#">Barracuda</a></li>
                </ul>
             </div>
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Reptiles</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Lizzards</a></li>
                   <li><a href="#">Snakes</a></li>
                   <li><a href="#">Iguanas</a></li>
                </ul>
             </div>
             
             <!-- this is a child that floats left -->
             <div class="SubNavSectionWrapper">
                <div class="SubNavSectionTitle">Birds</div>
                <ul class="SubNavSectionList">
                   <li><a href="#">Parakeets</a></li>
                </ul>
             </div>              
          </div><!-- END SubNav -->
       </div><!-- END SubNavWrapper -->
    </li><!-- END Animals Menu -->
</ul>  
</div> <!-- END Nav Bar -->

CSS

#MainNavBar {
background:url('../assets/design/images/MainNavGrad.jpg') repeat-x scroll 0 0 transparent;
height:43px;
margin-bottom:10px;
}


.NavSpace {
   background:url('../assets/design/images/NavSpacer.jpg');
   float:left;
   width:2px;
   height:100%;
}



/*------------------------------------*\
   NAV
\*------------------------------------*/
#nav{
   float:left;
   width:100%;
   list-style:none;
   font-weight:bold;
   margin-bottom:10px;
}
#nav li{
   float:left;
   margin-right:10px;
   position:relative;
   display:block;
}

a.MainNavButton{ /*Main Buttons */
   text-transform:uppercase;
   font-family:verdana;
   font-weight:bold;
   font-size:11px;
   text-align:center;
   text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
   color:#fff;  
   display:block;
   padding:12px 21px 16px 21px ; /* TOP LEFT Bottom RIGHT */     
   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   border-radius:2px;
}

#nav li a:hover{
   color:#fff;
   background:#444444;  /* Solid colour fall-back */
   text-decoration:underline;
}

/*--- DROPDOWN ---*/

/*
 * <div class="SubNavWrapper">
   <div class="SubNav">
      <div class="SubNavSectionWrapper">
         <h5>List 1</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
      <div class="SubNavSectionWrapper">
         <h5>List 2</h5>
         <ul class="SubNavSectionList">
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
         </ul>
      </div>
   </div>
</div><!-- END Nav Pad-->
*/


div.SubNavWrapper {   
   float:left;
   padding:30px;
   padding-top:0px;
   position:absolute;
   background:transparent;
   left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

div.SubNav {
   float:left;
   clear:both;
   width:600px;
   padding:30px;
   border:1px solid #222;
 ...