JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="sticker" class="ir"><a href="index.php">Respected Access - Is Open Access</a></h1>
<nav>
    <ul id="nav_main">
        <li class="compressed" id="nav_about">ABOUT
            <ul class="navSub" id="aboutSub">
                <li id="nav_overview"><a href="overview.php">Overview</a></li>
                <li id="nav_funding"><a href="funding.php">Funding Partners</a></li>
                <li id="nav_supporting"><a href="supporting.php">Supporting Partners</a></li>
            </ul>
        </li>
        <li id="nav_campaign">Campaign
            <ul class="navSub" id="campaignSub">
                <li id="nav_ohv"><a href="ohv-psa.php">OHV / ATV / UTV</a></li>
                <li id="nav_shooting"><a href="shooting-sports-psa.php">SHOOTING SPORTS</a></li>
            </ul>
        </li>
        <li id=""><a href="news.php">News</a></li>
        <li id="nav_resources">RESOURCES
            <ul class="navSub" id="resourcesSub">
                <li id="nav_ohv"><a href="ohv-psa.php">OHV / ATV / UTV</a></li>
                <li id="nav_shooting"><a href="shooting-sports-psa.php">SHOOTING SPORTS</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }

h1#sticker{
    position:relative;
    width:75px;
    height:20px;
    float:left;
    border:1px solid red
}

nav{
    position: absolute;
    font-family: 'LeagueGothicRegular', Helvetica, Arial, sans-serif;
    letter-spacing: 1.4pt;
    float:left;
    z-index:10;
}
nav ul#nav_main{
    position:relative;
    margin-top:2px;
    font-size:14px;
    color:#CCC;
    font-weight:bold;
}
nav ul#nav_main li, nav ul#nav_main li a{
    position:relative;
    display:inline;
    float:left;
    margin-right:8px;
    margin-left:8px;
    color:#CCC;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
}
nav ul#nav_main li.navSub:hover ,nav ul#nav_main li a:hover{
    color:#000;
    cursor:pointer;
}
nav ul.navSub{
    position:absolute;
    padding:0px;
    left:-10px;
    top:38px;
    display:none;
    font-size:28px;
    font-weight:normal;
    text-align:left;
    z-index:10;
    border:1px solid #000;
    background-color:#ccc;
    background-image: linear-gradient(bottom, rgb(85,85,85) 0%,  rgb(238,238,238) 100%);
    background-image: -o-linear-gradient(bottom, rgb(85,85,85) 0%, rgb(238,238,238) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(85,85,85) 0%, rgb(238,238,238) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(85,85,85) 0%,  rgb(238,238,238) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(85,85,85) 0%,  rgb(238,238,238) 100%);

    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(85,85,85)),color-stop(1, rgb(238,238,238))    );
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.75);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.75);
    box-shadow: 0px 0px 5px rgba(0,0,0,.75);
}
nav ul#nav_main li ul.navSub li, ul.navSub a li{
    width:250px;
    border-bottom:1px solid #888;
   ...