Keep dropdown open on hover jQuery

Keep dropdown open on hover jQuery

I'm making a quick animated drop down. I have it working great when you
mouseover and mouseout on the initial button. I just cant get the HTML div
that drops down to "hold" when you're hovered on the dropdown itself. here
is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') ||
$('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your
mouse over it. I added in
if ($('.dropdownCont').is(':hover') ||
$('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help
would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/