JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav_menu">
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS

* {   
margin: 0;
padding: 0;
}
    #nav_menu {
        position: absolute;
        display: block;
        height: 80px;
        width: 100%;
        background: orange;
    }
    #nav_menu li {
        list-style-type: none;
        text-decoration: none;
        vertical-align: middle;
        height: 80px;
        display: inline-block;
        position: relative;
    }
    .nav_menu_link {
        color: black;
        font-size: 18px;
        height: 0;
        font-family: Arial;
        vertical-align: baseline;
        position: relative;
        display: inline-block;
        height: auto;
        padding: 29px;
    }
    .nav_menu_link:hover {
        background: rgba(0, 0, 0, 0.4);
        color: #FFF;
        transition: all .2s;
    }
    .nav_menu_link:hover .arrow.down {
        border-top-color: #FFF;
    }

    #content1:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
    #content2:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
    #content1, #content2 {
        width: 100%;
        height: auto;
        background: gray;
        display: none;
        position: absolute;
    }
.content {
    
    border-bottom: 2px solid red;
}

JavaScript

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){
        
    }
);

$('#nav_menu').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);