JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>
</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />
<!-- NAV POP OUT -->
<div class="nav"></div>
</script>
</body>
</html>
CSS
div {
float:left;
padding-left:10px;
}
.nav {
background: url("https://dl.dropbox.com/u/32360643/subnav-jQuery/subnav.png") no-repeat;
width:844px;
height:22px;
display:none;
}
JavaScript
$(document).ready(function(){
$('.toggle').hover(
function(){
$('.nav').slideDown();
},
function (){
menuTimer = setTimeout("$('.nav').slideUp();", 2000);
}
);
$('.nav').hover(
function() {
clearTimeout(menuTimer);
},
function() {
$('.nav').slideUp();
}
);
});