Jquery mouseleave/mouseout и z-индекс

у меня такая навигация:

<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>
...

затем с помощью jquery я устанавливаю z-index для зависшего элемента меню выше, чем для подменю, и исчезаю в элементе подменю. Таким образом, наведенный элемент меню виден над подменю, а все остальные пункты меню находятся под подменю.

Теперь мне нужно установить событие мыши для подменю - mouseleave => скрыть подменю. Проблема: поскольку пункт меню теперь находится над подменю - если мышь остается над подменю, но наводит курсор на пункт меню 1, jquery понимает это как выход мыши для подменю

Это очень распространенная проблема для меня, я всегда использую какие-то «читы», но я думаю, что должно быть простое решение.

Я не предоставляю полный исходный код, но я не прошу у вас рабочий код, мне просто нужна идея. Надеюсь на помощь, спс.