Как сделать простое выпадающее меню с помощью jQuery

Это из серии «мелочь, а приятно!». Бутстрап хорош для адаптивных сайтов ИМХО, но есть маленькая неприятность — они действуют под лозунгом «Mobile first!» и наведение мышки их вообще не интересует. Это приводит к тому, что на обычных компьютерах выпадающее меню не срабатывает при наведении мышкой, а только при клике. Это не совсем удобно для тех, кто к этому не привык. Так же это может несколько ударить по конверсионности сайта. Мне тут подсказали простенький, но отлично работающий скрипт, исправляющий это. Им и делюсь :)

К примеру, имеется стандартное меню с уровнем вложенности:

 <ul class="nav"> <li><a href="#">Меню 1</a> <ul> <li>Меню 2</li> <li>Меню 2</li> <li>Меню 2</li> </ul> </li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 1</a></li> </ul> 

Добавляем скрипт:

 jQuery('ul.nav > li').hover(function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(); }) 

Как наверняка многие догадались, он просто навешивает на менюшку событие при наведении мышкой (и отвод ее). При этом прелесть скрипта в том, что он игнорируется на мобильных телефонах. То есть мобильники не выбрасывают событие mouseover, и потому там это событие не будет срабатывать. Это и хорошо. Я как-то пробовал сделать менюшку выпадающей и заюзал для этого стороннюю либу, которая типа это делает. Да, на компах все было ОК, но на мобильниках меню при клике раскрывалось и тут же схлопывалось. То есть одно лечим, другое калечим. А тут и там и там все ОК :)