$(function() {
closetimer = 0;

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

$('#nav b').click(function() {
clearTimeout(closetimer);
var $div = $(this).next('div');
if ($(this).hasClass('clicked')) {
xtop = $div.children('ul').height() + 30;
$div.children('ul').animate({ top: -xtop + 'px' }, 2000, 'swing');
$div.animate({ height: 'hide' }, 500); 
$div.slideUp(1000);
$(this).removeClass('clicked');
}
else {
hideDropdown();
$(this).addClass('clicked');
$div.animate({ height: 'show' }); 
//$div.slideDown(300);
$div.children('ul').animate({ top: '0px' }, 1000, 'swing');
}
});

$('#nav').hover(
function() {
clearTimeout(closetimer);
},
function() {
closetimer = window.setTimeout(function() {
hideDropdown();
}, 2000);
});

function hideDropdown() {
var $div = $('#nav b.clicked').next('div');
xtop = $div.children('ul').height() + 50;
$div.children('ul').animate({ top: -xtop + 'px' }, 2000, 'swing');
$div.slideUp(1000);
$('#nav b').removeClass();
}

}); // end of jQuery