JSFiddle - React, Tailwind, and code Playground

by Ramesh Rasaiyan

HTML

<ul class="nav--main">
    <li class="nav-item"><a href="#">About Us</a>
        <ul class="subnav--main">
            <li class="subnav--item"><a href="#">Web Development 1</a></li>
            <li class="subnav--item"><a href="#">Theme Development 1</a></li>
            <li class="subnav--item"><a href="#">Digital CMS 1</a></li>        
        </ul>
        <ul class="promoted-content--main">
            <li class="promoted-content--item">Promoted Content 1</li>
            <li class="promoted-content--item">Promoted Content 1</li>
            <li class="promoted-content--item">Promoted Content 1</li>
        </ul>    
    </li>
    <li class="nav-item"><a href="#">Services</a>
        <ul class="subnav--main">
            <li class="subnav--item"><a href="#">Web Development</a></li>
            <li class="subnav--item"><a href="#">Theme Development</a></li>
            <li class="subnav--item"><a href="#">Digital CMS</a></li>        
        </ul>
        <ul class="promoted-content--main">
            <li class="promoted-content--item">Promoted Content 2</li>
            <li class="promoted-content--item">Promoted Content 2</li>
            <li class="promoted-content--item">Promoted Content 2</li>
        </ul>
    </li>
    <li class="nav-item"><a href="#">Contact</a></li>
</ul>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: verdana;
}
a {
    text-decoration: none;
}
.nav--main {
  clear: both;
  width: 100%;
}
.nav-item {
  float: left;
  width: 33.3%;
  height: 25px;
  background: #BBB;  
}
.subnav--main {
    position: absolute;
    top: 25px;
    clear: both;
    width: 100%;
    display: none;
    left: 0;
}
.subnav--item {
    width: 33.3%;
    float: left;
    height: 25px;
    background: #CCC;
}
.promoted-content--main {
    position: absolute;
    top: 50px;
    clear: both;
    width: 100%;
    display: none;
    left: 0;
}
.promoted-content--item {
    width: 33.3%;
    float: left;
    height: 100px;
    background: #DDD;
}

JavaScript

var timer;
$('.nav-item').hover(function() {
    $('.subnav--main').hide();
    $('.promoted-content--main').hide();
    clearTimeout(timer);
    $(this).find('ul').fadeIn( 'slow' );
    },
    function() {
      timer = setTimeout(function() {
        $('.subnav--main').fadeOut( 'fast' );
        $('.promoted-content--main').fadeOut( 'fast' );
      }, 1000);
  });