Jquery mouseleave/mouseout и z-index

Question

У меня есть такая навигация:

<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 понимает его как отпуск мышью для подменю.

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

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

Answer 1

Вот один из способов, которым вы можете настроить это, используя чистый CSS:

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

Хитрость заключается в том, чтобы применить :hover стили для подменю, которые отображают их только при наведении на элемент списка. Поскольку подменю также является частью родительского элемента списка, оно остается отображаемым, пока мышь находится над подменю. И вы все равно можете добавить дополнительную интерактивность jQuery/JavaScript к ссылкам и / или элементам списка, если это необходимо.

Answer 2

Используйте меню pureCSS, которое является более эффективным и бесплатным JS. Вы можете использовать этот редактор для создания своего меню pureCSS онлайн.

http://purecssmenu.com/

Также это руководство, объясняющее основы чистого CSS-меню.

http://meyerweb.com/eric/css/edge/menus/demo.html

Если вам нужно решение с JQuery и CSS с эффектами, этот учебник поможет вам.

http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/

Надеюсь это поможет.