JSFiddle - React, Tailwind, and code Playground

by JoshuaPack

HTML

<ul id="nav">
    <li class="navcat"><a href="#">Home</a></li>
    <li class="navcat"><a href="#">Category 1</a>
        <ul>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li class="navcat"><a href="#">Category 2</a>
        <ul>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li class="navcat"><a href="#">Category 3</a>
        <ul>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
</ul>

CSS

ul#nav {
  position:relative;
  float: left;
  width: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: black;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: auto;
  padding: 0 35px;
}

a.selected
{
color:Blue;   
}

ul#nav .highlight a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #1C436E;  
}

ul#nav  ul {
  display: none;
}

ul#nav li.highlight > ul {
  display: block;
  width: 600px;
  height: 35px;
  position: absolute;
  margin: 40px 0 0 0;
  background-color: #1C436E;
}

ul#nav li.highlight > ul li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 35px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 2 30px 0 0;
  background-color: #1C436E;
}

JavaScript

$(document).ready(function(){
    var clearli;
    $(".navcat").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('highlight');
        $(this).addClass('highlight');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('highlight');
        }, 1000);
    });
});