JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<nav class="mod_navigation block">
<ul class="level_1">
      <li class="submenu sibling first "><a id="nav0" class="submenu sibling first " title="" href="#">Lorem</a>

<ul class="level_2 count0" >
      <li class="submenu first"><a class="submenu first" title="" href="">Lorem ipsum dolor sit amet</a>

<ul class="level_3">
      <li class="first"><a class="first" title="" href="">Lorem ipsum dolor sit amet</a></li>
    <li><a title="" href="">Lorem ipsum dolor sit amet</a></li>
        <li><a title="" href="">Lorem ipsum dolor sit amet</a></li>
        <li><a title="" href="">AuLorem ipsum dolor sit amettomotive</a></li>
        <li><a title="" href="">Lorem ipsum dolor sit amet</a></li>
        <li><a title="" href="">Lorem ipsum dolor sit amet</a></li>
        <li><a title="" href="">Lorem ipsum dolor sit amet</a></li>
        
    </ul>
</li>
        <li class="submenu"><a class="submenu"  href="">Lorem ipsum dolor sit amet</a>

<ul class="level_3">
      <li class="first"><a class="first"  href="">Lorem ipsum dolor sit amet</a></li>
        <li><a  href="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></li>
        <li class="last"><a class="last"  href="">Lorem ipsum dolor sit amet</a></li>
    </ul>
</li>
        <li class="submenu last"><a class="submenu last"  href="">Lorem ipsum dolor sit amet</a>

<ul class="level_3">
      <li class="first"><a class="first"  href="">Lorem ipsum dolor sit amet</a></li>
        <li><a  href="">Lorem ipsum dolor sit amet</a></li>
        <li><a href="">Lorem ipsum dolor sit amet</a></li>
        <li><a  href="">Lorem ipsum dolor sit amet</a></li>
        
    </ul>
</li>
    </ul>
</li>
        <li class="submenu sibling"><a id="nav1" class="submenu sibling" href="#">Lorem ipsum</a>

<ul class="level_2 count1">
      <li class="submenu first"><a class="submenu first"  href="">Lorem ipsum dolor sit amet</a>

<ul class="level_3">
      <li class="first"><a class="first"  href="">Lorem ipsum dolor...

CSS

#nav {
    height: 50px;
    background: linear-gradient(to bottom, rgba(203, 216, 216, 0) 0%, rgba(203, 216, 216, 0) 50px, #CBD8D8 50px, #CBD8D8 90px, #E5EBEB 90px, #E5EBEB 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-family:Verdana;
    font-size:13px;
}

#nav .mod_navigation {
    background: linear-gradient(to right, #3E8088 0%, #2D363C 30%, #575E63 60%, #3D454B 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 50px;
}
#nav .level_1 {
    padding-left: 55px;
    width: 905px;
    margin:auto;
}
#nav .level_1 li {
    display: inline;
}
#nav .level_1 a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 14px;
    height: 32px;
    line-height: 16px;
    text-transform: uppercase;
    margin-right:20px;
}
#nav .level_2 {
    display: none;
    margin-top: 50px;
    position: absolute;
    padding-left: 20px;
}
#nav .level_2 li {
    display: block;
    float: left;
}


#nav .level_3 {
    width:200px;
    padding-top:35px;
    display: block;
}

JavaScript

$(document).ready(function() {

var $topLevelItems = $("nav > ul > li > a");
$topLevelItems.click(function(event) {
    if ( !$(event.target).closest('ul').is('.level_1') ) {
        return;
    }
    event.preventDefault();

    if (!$(this).hasClass('selected')) {
        $topLevelItems.removeClass('selected')
            .find('#nav')
$('#nav').animate({height:"50px"},400);

        $(this).addClass('selected')
            .find('#nav').fadeIn('slow')
$('nav ul li').find(".level_2").css('visibility', 'visible');

var childHeight = $(".level_2").height();
$('#nav').animate({height:childHeight},400);
    }
});

});