JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navholder" class="">
            <div id="navservice" class="outernav">
                <a href="" alt="Services"><h2>Services</h2></a>
                <div id="innavservice" class="innernav">
                    <a href="">Specimens</a> | <a href="">Collection Access</a> | <a href="">Identification</a> | <a href="">Books</a><br>
                    <a href="">Destructive Sampling</a> | <a href="">Loans</a> | <a href="">Specimen Submission</a><br>
                    <a href="">Specimen Labels</a> | <a href="">Quarantine</a> | <a href="">Data Use Conditions</a><br>
                    <a href="">Specimen Images</a>
                </div>
            </div>
            <div id="navprojects" class="outernav">
                <a href="" alt="Projects"><h2>Projects</h2></a>
                <div id="innavprojects" class="innernav">
                    <a href="">Legumes of Arizona</a> | <a href="">Biodiversity Informatics</a> | <a href="">Floras</a><br>
                    <a href="">Nichol Turk's Head Cactus Working Group</a> | <a href="">Section 6</a><br>
                    <a href="">National Park Service</a> | <a href="">Pringle's Arizona Catalog</a><br>
                    <a href="">Type Imaging</a>
                </div>
            </div>
            <div id="navresources" class="outernav">
                <a href="" alt="Resources"><h2>Resources</h2></a>
                <div id="innavresources" class="innernav">
                    <a href="">Convolvulaceae Pollen Atlas</a> | <a href="">Shantz Photographs</a><br>
                    <a href="">Convolvulaceae of Sonora</a> | <a href="">Floras for Other Regions</a><br>
                    <a href="">Arizona Floras and Floristic Works</a> | <a href="">Publications</a><br>
                    <a href="">Homer Shantz</a> | <a href="">Sample Photos</a> | <a href="">Links</a>
                </div>
            </div>
            <div id="navariz" class="outernav">
                <a href=""...

CSS

/* div containing drop-down top white circle navigation */
-ms-clear {
   
}
#navigationc {
    width: 500px;
    height: 375px;
    position: relative;
    margin: 0 auto 0 auto;
    top: -150px;
    z-index: 3;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.5;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    transition: top 0.5s;
}

/* drop-down functionality */
#navigationc:hover {
    top: 0;
}

/* Circle navigation */

/* moves #navservice div to top of drop-down navigation */
#navholder:hover #navservice {
    margin-top: 5px;
}

/* contains the collection of links within each navigation section */
.innernav {
    height: 0px;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    transition: height 0.5s;
}

/* the first main section of the drop-down navigation menu */
#navservice {
    margin-top: 155px;
    -webkit-transition: margin-top 1s;
    -moz-transition: margin-top 1s;
    transition: margin-top 1s;
}

/* expands each menu section when it is hovered over to expose child links */
#navservice:hover #innavservice {
    height: 105px;
}

#navprojects:hover #innavprojects {
    height: 105px;
}

#navresources:hover #innavresources {
    height: 105px;
}

#navariz:hover #innavariz {
    height: 105px;
}