JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<h3>Navigation:</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
    <ul>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Location</a></li>
        <li><a href="#">offices</a></li>
    </ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS

ul {
    overflow: hidden;
}

ul li {
    height: 20px;
    background: rgba(0,0,0,.2)
}

ul ul {
    height: 0;
    overflow: hidden;
}

ul ul li {
    float: left;
    padding: 0 5px 0 0;
}
ul li.active {
    height: auto;
}
ul li.active ul {
    height: auto;
}

JavaScript

(function(){
    var navigation = function( $navigation ){
        var $activeItem, $items, isOpen;
        
        $items = $navigation.find(" > li");
        $activeItem = $items.eq(0);
        isOpen = false;
        
        $navigation.height( $activeItem.height() );
        
        $items.on("click", function(event){
          event.preventDefault();
            var $that = $(this);
          if(!isOpen) {
              $items.eq(0).css({"margin-top": 0});
              $navigation.css({"height": "auto"});
              isOpen = true;
              $items.removeClass("active")
              $that.addClass("active");
              
          }else{
              $items.eq(0).css({"margin-top": "-" + $that.offset().top + "px"});
              $navigation.height( $activeItem.height() + 10 );
              isOpen = false;
          }
        });
    };
        
    $(function(){
        navigation( $("ul:eq(0)") );        
    });
}())