jQuery horizontal tabs with slide down sub menus

<style>

#pad {height:200px;} /* for this demo only */
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
#nav {padding:0; margin:0; list-style:none;}
#nav {position:relative; z-index:100;}
#nav div {display:none; position:absolute; left:0; top:40px; height:auto; float:left; width:174px; overflow:hidden;}

#nav li {float:left; position:relative; margin-right:1px;}
#nav li a {text-decoration:none; font-family:arial, sans-serif; font-size:13px; white-space:nowrap; display:block; padding:0 10px; cursor:pointer; height:40px; line-height:40px; float:left; font-weight:normal; color:#fff; background:url(background.gif) no-repeat top left;}
#nav li b {display:block; float:left; cursor:pointer; width:30px; height:40px; font-weight:normal; background:url(background.gif) no-repeat top right;}
#nav li.nosub a {padding:0 0 0 10px;}
#nav li.nosub em {display:block; width:10px; height:40px; float:left; background:url(background.gif) no-repeat top right;}

#nav li ul {padding:2px 2px 10px 2px; margin:0; list-style:none; background:url(background.gif) no-repeat bottom left;; width:170px; position:relative;}

#nav li ul li {float:none; width:170px; margin:0; height:20px;}
#nav li ul li a {display:block; height:20px; line-height:20px; padding:0 5px; background-image:none; color:#fff; font-size:12px; width:160px;}
#nav li ul li a:hover {background:#20bffc;}
</style>

Java script

<script src='http://www.stunicholls.com/menu/js/jquery-1.3.2.min.js' type='text/javascript'/>
  <script type="text/javascript">


/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
$(document).ready(function(){
closetimer = 0;

if($("#nav")) {

$("#nav li div").each(function(i) {
eheight = $(this).height();
$(this).children().css("top",-eheight+"px");
});

$("#nav li.nosub").mouseover(function() {
eheight = $("#nav b.clicked").next().children().height()+20;
$("#nav b.clicked").next().children().animate({"top":-eheight+"px"}, {queue:false,duration:(300)});
$("#nav b.clicked").next().slideUp(500);
$("#nav b").removeClass("clicked");
});

$("#nav b").mouseover(function() {
clearTimeout(closetimer);
if(this.className.indexOf("clicked") != -1) {
eheight = $(this).next().children().height()+20;
$(this).next().children().animate({"top": -eheight+"px"}, {queue:false,duration:(300)}, "swing");
$(this).next().slideUp(500);
$(this).removeClass("clicked");
}
else {
eheight = $("#nav b.clicked").next().children().height()+20;
$("#nav b.clicked").next().children().animate({"top": -eheight+"px"}, {queue:false,duration:(300)}, "swing");
$("#nav b.clicked").next().slideUp(500);
$("#nav b").removeClass();
$(this).addClass("clicked");
$(this).next().slideDown(100);
eheight = $("#nav b.clicked").next().children().height();
$(this).next().children().animate({"top":"0px"}, {queue:false,duration:(300)}, "swing");
}
});
$("#nav").mouseover(function() {
clearTimeout(closetimer);
});
$("#nav").mouseout(function() {
closetimer = window.setTimeout(function(){
eheight = $("#nav b.clicked").next().children().height()+20;
$("#nav b.clicked").next().children().animate({"top":-eheight+"px"}, {queue:false,duration:(300)}, "swing");
$("#nav b.clicked").next().slideUp(500);
$("#nav b").removeClass("clicked");
}, 2000);
});
}
});
</script>

2-Htlm

© http://www.stunicholls.com/menu/jquery-horizontal-slide3.html