[jQuery] hover problems

[jQuery] hover problems


Been searching for the last hour, found some solutions, but still not
good enough.
I have a navigation menu -- when I hover over a header, I want the
submenus to slideDown, and then on hoverOut, I want it to slide back
in. First, I was having problems with it only displaying 2 or 3 of
the dropdown items if I got crazy with the hovering (on, off, on, off
quite rapidly). Then I found the .css(overflow:visible) fix. That
causes the menu to at least always display all the items, but the
effect is lost if you hover on/off quickly.
What am I missing? This can't be this hard.
Here's the link:
http://www.threedaysaside.com/cep
Javascript:
$(document).ready(function() {
    $(".sub_div").hide();
    /*$(".sub_div").css('opacity', 0.9);*/
    $(".subnav_a").hover(function() {
        $(".sub_div").stop().css('overflow', 'visible').slideDown(800);
    }, function() {
        $(".sub_div").stop().css('overflow', 'visible').slideUp(300);
    });
});
The Residential link is the only one with a dropdown. And don't worry
about the styling, I haven't even had a chance to worry about it
myself yet.