$(function() {
      closetimer = 0;

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

      $('#nav li.nosub').mouseover(function() {
        hideDropdown();
      });

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

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

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

    });        // end of jQuery