[jQuery] hover problems

[3daysaside]

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.