Entonces tienes este código:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normalmente funciona en eventos de clic, y desea que funcione en eventos de desplazamiento. Esto es muy simple, solo use este código javascript / jquery:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
Esto funciona muy bien y aquí está la explicación: tenemos un botón y un menú. Cuando pasamos el botón, mostramos el menú, y cuando pasamos el mouse del botón, ocultamos el menú después de 100 ms. Si te preguntas por qué lo uso, es porque necesitas tiempo para arrastrar el cursor desde el botón sobre el menú. Cuando está en el menú, la hora se restablece y puede permanecer allí tantas veces como desee. Cuando salga del menú, ocultaremos el menú instantáneamente sin ningún tiempo de espera.
He usado este código en muchos proyectos, si encuentra algún problema al usarlo, no dude en hacerme preguntas.