JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>   
</head>    
<body>
    
        <ul id="nav">
        <li><a href="home.html"><span>M</span>enu</a>
            <ul>
                <li><a href="fashion.html"><span>F</span>ashion</a></li>
                <li><a href="about-us.html"><span>A</span>bout <span>U</span>s</a></li>
                <li><a href="find-us.html"><span>F</span>ind <span>U</span>s</a></li>
                <li class="underline"><a href="http://www.bellissimafashions.com/blog/"><span>B</span>log</a></li>
            </ul>
        </li>    
    </ul>
 
    
    </body>
</html>

CSS

#nav {
  font-family: 'MedioRegular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 15px;
  text-transform: uppercase;
  margin:10px 0 0 10px;
  padding:0;
  list-style:none;
  line-height: 25px;
  }    

#nav li {
  float:left;
  display:block;
  width:167px;
  position:relative;
  z-index:500;
  margin:0 1px;
  }

#nav li a {
  display:block;
  padding:0 0 0 20px;
  height:25px;
  text-decoration:none;
  color:#fff;
    background: #111;
  text-align:left;
  }    

#nav li a:hover {
  color:#fff;
    background: #111;
  }

#nav a.selected {
  color:#fff;
    background: #111;
  }

#nav ul {
  position:absolute;
  left:0;
  display:none;
  margin:0 0 0 -1px;
  padding:0;
  list-style:none;

  }

#nav ul li {
  width:165px;
  float:left;
  border-left:1px solid #111;
  border-right:1px solid #111;
  }

#nav ul li.underline {
  border-bottom:1px solid #111;
  }

#nav ul a {
  display:block;  
  height:25px;
  padding:0 0 0 23px;
  color:#111;
  background:url(../images/spacer.gif) repeat;
  }

#nav ul a:hover {
  text-decoration:none;    
  }

JavaScript

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});