JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<ul>
   <li><a href="#">My Profile</a></li>
   <li><a href="#">Activity Entry</a>
       <ul class="subnav">
         <li><a href="#">Sales</a></li>
         <li><a href="#">Track</a></li>
         <li><a href="#">Place</a></li>
       </ul>
   </li>
   <li><a href="#">Reporting</a></li>
   <li><a href="#">Administrative</a>
      <ul class="subnav">
        <li><a href="#">Manage Account</a></li>
        <li><a href="#">Add Account</a></li>
      </ul>
   </li>
</ul>

CSS

ul li {display:inline;font-weight:bold; border:1px solid red; width:120px; float:left; height:0px;}
    li a {display:block;}
    a:hover {background-color:#1199aa;}
    .subnav {display:none;}
    ul li ul {margin-left:10px; padding-left:0px;}
    ul li ul li { font-weight:normal; display:block; border:1px solid; width:110px; }

JavaScript

$(document).ready(function(){
  $("li a").hover(function(){
    $(this).parent().children('ul').show();
    $(this).parent().children('ul').hover(function(){
        $(this).parent().children('ul').animate({height:'auto'});
      },
     function(){
         $(this).parent().children('ul').animate({height:'0px'});
     }
    );
  }, 
   function(){
    $(this).parent().children('ul').hide();
   }
  );
});