Bootstrap Dropdown with Hover
The easiest solution would be in CSS. Add something like...
.dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close }
The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
$('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click'); });
You can use jQuery's hover function.
You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.
Here's my code:
$(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); });});