JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-wrap" style="position:absolute;top:420px;">

<ul>
    <li id="link-one" class="orange">
    <a href="printing.html" class="parent-one-link" title="Printing"><span>Printing</span></a>

     <div class="subnav">
          <ul>
            <li><a href="_printing/digital-printing.html" title="Digital Printing">Digital Printing</a></li>
            <li><a href="_printing/offset-printing.html" title="Offset Printing">Offset Printing</a></li>
            <li><a href="_printing/business-cards&amp;stationery.html" title="Business Cards &amp; Stationery">Business Cards &amp; Stationery</a></li>
            <li><a href="_printing/manuals-reports&amp;catalogues.html" title="Manuals, Reports &amp; Catalogues">Manuals, Reports &amp; Catalogues</a></li>
            <li><a href="_printing/bindery-services.html" title="Bindery Services">Bindery Services</a></li>
            <li><a href="_printing/canada-post.html" title="Canada Post">Canada Post</a></li>
            <li><a href="_printing/graphic-design-typesetting.html" title="Graphic Design &amp; Typesetting">Graphic Design &amp; Typesetting</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="red"><a href="promotional-products.html" title="Promotional Products"><span class="doubleLine">Promotional Products</span></a>

    <div class="subnav">
          <ul>
            <li><a href="_promotional-products/awards-mounting.html" title="Awards &amp; Mounting">Awards &amp; Mounting</a></li>
            <li><a href="_promotional-products/binders.html" title="Binders">Binders</a></li>
            <li><a href="_promotional-products/clothing-apparel.html" title="Clothing &amp; Apparel">Clothing &amp; Apparel</a></li>
            <li><a href="_promotional-products/bags.html" title="Bags">Bags</a></li>
            <li><a href="_promotional-products/drinkware.html" title="Drinkware">Drinkware</a></li>
            <li><a href="_promotional-products/keyrings.html"...

CSS

#nav-wrap {
  width:100%;
    height:100px;
    font-weight:500;
    padding: 0;
    left:0;
    font-family: 'Raleway', Arial, sans-serif;
    z-index:100;
    float:left;
}   

#nav-wrap ul {
    list-style-type: none;
    margin: 0;
    padding:0;
    text-transform: uppercase;
}

#nav-wrap ul li {
    width:100%; /*  ~(100/7)  */
    text-align:center;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  width:14.275%; /*  ~(100/7)  */
    display:block;
    float:left;
}

#nav-wrap ul li span {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    font-size:1.45em;
    text-align: center;
    padding: 0 5% 0 5%; /* was 0 20px */ 
    line-height: 100px;
}

#nav-wrap ul li a {
    width:100%;
    display: block;
    height: 100%;
    position: relative;
    color:#FFFFFF !important;
    text-decoration:none;
    z-index:100;
}

.doubleLine {
  display: table-cell;
  line-height: 1em;
  width:65.275%;
}

#nav-wrap ul li.orange a {
    background-color:#f37028;
}
#nav-wrap ul li.orange a:hover {
    /*color: #231f20 !important;*/
    background-color:#f38143 !important;
}
#nav-wrap ul li.red a {
    background-color:#ed1b24;
}
#nav-wrap ul li.red a:hover {
    /*color: #231f20 !important;*/
    background-color:#f03139 !important;
}
#nav-wrap ul li.pink a {
    background-color:#e54198;
}
#nav-wrap ul li.pink a:hover {
    /*color: #231f20 !important;*/
    background-color:#eb5ca8 !important;
}
#nav-wrap ul li.purple a {
    background-color:#6b439c;
}
#nav-wrap ul li.purple a:hover {
    /*color: #231f20 !important;*/
    background-color:#7c56ac !important;
}
#nav-wrap ul li.blue a {
    background-color:#0193cf;
}
#nav-wrap ul li.blue a:hover {
    /*color: #231f20 !important;*/
    background-color:#22a7de !important;
}
#nav-wrap ul li.green a {
    background-color:#80c02c;
}
#nav-wrap ul li.green a:hover {
    /*color: #231f20 !important;*/
    background-color:#8cc93b...

JavaScript

$(".subnav").prev().mouseover(function(){
    var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
    $(this).next().css({'position':'relative','bottom':sub_menu_shift});
});