How do I properly initiate this class so that on mouseleave my drop-down will slide up?

How do I properly initiate this class so that on mouseleave my drop-down
will slide up?

I finally got this drop-down to animate and behave the way I want it to,
but I have one little bug that makes it so that on the initial mouseleave
of a drop-down trigger will not cause the drop-down to slide up but
instead just freezes in place. Other than that, I'm a pretty new
programmer so if anyone has some tips on how to make this run cleaner or
make my code more efficient I always love to get professional criticism on
my code. Thanks.
/** Mega DropDown **/
/* Determine if the user is hovering over the trigger for more than .5sec
and if there is already a drop-down menu showing.
If there is then modify the containing elements height to match the new
contained elements and if not then set the
containing element to the correct height */
$(".cataDropDown").mouseenter(function () {
$this = $(this); //use currently selected ".cataDropdown"
var EleHt = ($this.children('ul').height()) + 29; //Get height of
contained elements for slide event
var count = 0;
var onHoverTimer = setInterval(function () {
count += 1; //setInterval for hover timer
//If User hovers over trigger for more than .5 seconds -
if (count >= 1) {
clearInterval(onHoverTimer); //Clear counter
onHoverTimer = setInterval(300);
$(".cataDropDown").children('ul').animate({ opacity: '0' },
200).hide(); //Give contained elements dimension but keep
hidden with opacity property
$this.children('ul').show().css('opacity', '0'); //Give
contained elements dimension but keep hidden with opacity
property
$this.parents('div#menuContainer').stop(true, false).animate({
height: EleHt }, 400); //Open container to height of contained
elements
$this.children('ul').stop(true, true).animate({ opacity: '1'
}, 200); //show child elements (menu)
$this.addClass('menu-active') //add class "menu-active" to
test if the drop-down is currently open
}
}, 300);
$(".cataDropDown").mouseleave(function () {
clearInterval(onHoverTimer); //Clear counter to prevent opening
the menu by accident
onHoverTimer = setInterval(300);
if (!$this.hasClass('menu-active')) {
$(".cataDropDown").removeClass('menu-active');
$this.parents('div#menuContainer').animate({ height: '27px' },
400);
$('.cataDropDown > ul').stop().animate({ opacity: '0' }, 200,
function () {
$(this).hide();
});
} else {
$this.parents('div#menuContainer').stop(true, false).animate({
height: EleHt }, 200);
$this.removeClass('menu-active');
//window.console && console.log(EleHt);
}
});
});
edit: JSFiddle as requested - http://jsfiddle.net/hUtAp/8/