Question

I have put together a navigation bar which expands a submenu on hover. See my jsFiddle.

If you hover on the menu items, the submenu expands beyond the parent <nav> (which I have coloured blue). What I am after is for the blue <nav> element to expand with the child <ul>.

I don’t know if I need a jQuery or css solution but everything I have tried so far has been in vain.

AND

If your mouse happens to quickly hover across the navigation, say from ‘MENU 3’ to ‘MENU 1’ then rest on a submenu item such as ‘ONE A’ (before it actually appears), the jQuery gets stuck in a repeating loop where each submenu opens and closes.

What needs to be changed to prevent this happening?

Answer 1

Add stop() after $(this).find(‘ul’) this should help with animations.

$(document).ready(

function() {
    $('.menu li ul').hide();
    $('.menu li').hover(function(e) {
        $(this).find('ul').stop().slideToggle("slow");
    });
});

And the reason menu does not expand is that your “.menu li ul” is set to position absolute. When element has absolute position it is removed from the normal flow