Question

Hi guys I have put together a simple dropdown menu system that uses hoverIntent to display the submenu and also display a lightbox style ‘lights out’ dark background.

I’ve got the menu working, but I’d like to update it so if you move from one item to the next the dark background stays where it is rather than disappearing and reappearing.

I have created a jsFiddle so you can see what I’m talking about:
http://jsfiddle.net/gGd6Y/10/

Try hovering over menu item 1 then moving to item 2.

I would like to be able to see the element the mouse cursor has moved to in the .mouseleave() part of the call to HoverIntent, then if it’s another menu item I would prevent the dark background from being switched off.

Answer 1

With the way the HTML is currently setup it can’t be done. The shadow covers the other hoverable elements. So when you mouseleave you are hovering over the shadow not the other LIs.

My proposed solution: http://jsfiddle.net/iambriansreed/k98LP/

I made the menu appear above the shadow. I delayed the shadow fade out action and made sure no other menu item was hovered before actually fading out.