Jquery mouseleave/mouseout and z-index

Question

ttI have such navigation:

<ul>
   <li><a href='#'>Menu title 1</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
   <li><a href='#'>Menu title 2</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
...

then with jquery I set z-index for hovered menu item higer as for submenu and fade in submenu element. So hovered menu item element is visible over submenu and all other menu items are under submenu.

Now i need to set mouse event for submenu - mouseleave => hide submenu. The problem: as menu item is now over submenu - if mouse stays over submenu but hovers menu item 1, jquery understands it as mouseleave for submenu

It is very common problem for me, I always use some kind of "cheats" but i think there must be an easy solution.

I don't provide full source code, but I don't ask you for working code, I just need some idea. Hope for help, thx.

Answer 1

Here's one way you can set this up using pure CSS:

http://jsfiddle.net/mblase75/nr8xZ/

The trick is to apply :hover styles to the submenus that display them only when a list item is hovered over. Since the submenu is also part of the parent list item, it stays displayed as long as the mouse is over the submenu. And you can still add additional jQuery/JavaScript interactivity to the links and/or list items, if needed.