making accessible mega menu, trouble with slideDown on focus

Question

Hi there I'm trying to make an accessible mega menu. I can get the dropdown menu to display fine on hover, but I also need it to slideDown when a user doesn't have a mouse i.e. when the link is focused. You can try this if you click in the fiddle result frame: http://jsfiddle.net/Dcws6/1/ and press alt+tab (safari) tab (windows). There must be something wrong with my jquery but I can't for the life of me figure it out.

The other thing I'm trying to do is to make sure one animation finishes before the next one fires, i.e. when you mouseover 'about us' then mouseover gallery it waits for the 'about us' dropdown menu to slideUp before it slidesDown the 'gallery' dropdown.

Thanks

Answer 1

The focus is on the link and not on the div that contains it.

$('.drop a').focus(
function() {
    $(this).closest("li").find('div.nav-container').stop(true, true).delay(500).slideDown('slow');
});
$('.drop a').blur(
function() {
    $(this).closest("li").find('div.nav-container').stop(true, true).delay(500).slideUp('slow');
});​

DEMO