Как сделать выпадающее меню Twitter Bootstrap по наведению, а не по клику

Вы можете использовать следующий код jQuery для добавления эффекта наведения на выпадающие меню:

// Добавляем эффект наведения для меню
jQuery('ul.nav li.dropdown').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();
});

Этот код назначает обработчики событий hover для элементов li с классом dropdown, находящимся внутри ul с классом nav. Когда курсор мыши наводится на элемент li, срабатывает первая функция, которая ищет элемент с классом dropdown-menu и плавно отображает его с задержкой в 200 миллисекунд. Когда курсор уходит, срабатывает вторая функция, которая скрывает меню с аналогичной задержкой.

Обратите внимание, что использование stop(true, true) помогает предотвратить накопление анимаций, что обеспечивает более гладкий пользовательский опыт.

Чтобы настроить стиль CSS для выпадающего меню, достаточно добавить три строки кода:

.dropdown:hover .dropdown-menu {
   display: block;
}

Этот код делает так, что меню будет отображаться при наведении курсора на элемент с классом dropdown. Убедитесь, что ваши классы именуются правильно, чтобы данный стиль работал корректно.

Существует множество отличных решений на эту тему. Но я решил поделиться своим вариантом в качестве альтернативы. Это простой фрагмент кода на jQuery, который реализует поведение, как если бы Bootstrap поддерживал автоподсказки для выпадающих меню при наведении, а не только по клику. Я тестировал это только с версией 3, так что не уверен, сработает ли это с версией 2. Сохраните это как фрагмент в вашем редакторе, чтобы использовать по мере необходимости.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

По сути, этот код просто добавляет класс open, когда вы наводите курсор на элемент с классом dropdown. Как только курсор покидает этот элемент (либо родительский li с классом dropdown, либо дочерние ul/li), класс open удаляется. Это лишь одно из многих возможных решений, и вы можете доработать его, чтобы оно работало только на конкретных экземплярах .dropdown. Также можно добавить анимацию для родителя или дочерних элементов.

Это сработало для меня:

.dropdown:hover .dropdown-menu {
    display: block;
}

Это встроено в Bootstrap 3. Просто добавьте этот код в ваш CSS:

.dropdown:hover .dropdown-menu {
    display: block;
}

Теперь ваше выпадающее меню будет показываться при наведении курсора на элемент.