Cómo hacer que el menú desplegable de Twitter Bootstrap se desplace en lugar de hacer clic

Para obtener el menú para caer automáticamente en hover entonces esto se puede lograr utilizando CSS básico. Es necesario trabajar el selector de la opción de menú oculto y luego configurarlo para mostrar como bloque cuando la etiqueta apropiada li se pasa el cursor sobre. Tomando el ejemplo de la página bootstrap de twitter, el selector sería el siguiente:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Sin embargo, si está utilizando las funciones de respuesta de Bootstrap, no querrá esta funcionalidad en una barra de navegación colapsada (en pantallas más pequeñas). Para evitar esto, envuelva el código anterior en una consulta de medios:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Para ocultar la flecha (caret) esto se hace de diferentes maneras dependiendo de si está utilizando Twitter Bootstrap versión 2 y menor o versión 3:

Bootstrap 3

Para eliminar el caret en la versión 3, solo tiene que eliminar el HTML <b class="caret"></b> del elemento de anclaje .dropdown-toggle:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lower

Para eliminar el caret en la versión 2, necesita un poco más de información sobre CSS y sugiera observar cómo funciona el pseudo elemento :after con más detalle. Para comenzar a comprender, apuntar y eliminar las flechas en el ejemplo de bootstrap de twitter, usaría el siguiente selector y código CSS:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Funcionará a tu favor si miras más a fondo cómo funcionan y no solo usas las respuestas que te he dado.

Gracias a @CocaAkat por señalar que nos faltaba el combinador infantil " > " para evitar sub los menús que se muestran en el cursor principal

Además de la respuesta de" Me duele la cabeza " (que fue genial):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Hay 2 cuestiones pendientes:

1. Al hacer clic en el enlace desplegable, se abrirá el menú desplegable. Y permanecerá abierta a menos que el usuario haga clic en otro lugar, o pase el cursor sobre ella, creando una interfaz de usuario incómoda.
2. Hay un margen de 1px entre el enlace desplegable y el menú desplegable. Esto hace que el menú desplegable se oculte si se mueve lentamente entre el menú desplegable y menú desplegable.

La solución para (1) es eliminar los elementos "class" y "data-toggle" del enlace de navegación

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Esto también le da la capacidad de crear un enlace a su página principal, lo que no era posible con la implementación predeterminada. Puedes simplemente reemplazar el " # " con cualquier página que quieras enviar al usuario.

La solución a (2) es eliminar el margen-top en el .selector de menú desplegable

.navbar .dropdown-menu {
 margin-top: 0px;
}

He usado un poco de jQuery:

// Add hover effect to menus
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();
});

Hay muchas soluciones realmente buenas aquí. Pero pensé que iba a seguir adelante y poner el mío aquí como otra alternativa. Es solo un simple fragmento de código jQuery que lo hace de la manera en que bootstrap lo haría si soportara hover para desplegables en lugar de simplemente hacer clic. Solo he probado esto con la versión 3, así que no se si funcionaría con la versión 2. Guárdalo como un fragmento de código en tu editor y tenlo con solo pulsar una tecla.

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

Básicamente, es solo decir que cuando se cierne sobre el clase desplegable, agregará la clase abierta a ella. Entonces simplemente funciona. Cuando deja de pasar el cursor sobre la li principal con la clase desplegable o la ul/li secundaria, elimina la clase abierta. Obviamente, esta es solo una de las muchas soluciones, y se puede agregar a ella para que funcione solo en casos específicos de .desplegable. O agregue una transición a padre o hijo.

Simplemente personaliza tu estilo CSS en tres líneas de código

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

Si tienes un elemento con una clase dropdown como esta (por ejemplo):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Luego puede hacer que el menú desplegable se desplace automáticamente al pasar el cursor sobre, en lugar de tener que hacer clic en su título, utilizando este fragmento de código jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Aquí hay una demo

Esta respuesta se basó en @Michael answer , he hecho algunos cambios y agregado algunas adiciones para que el menú desplegable funcione correctamente

[Update] El plugin está en GitHub y estoy trabajando en algunas mejoras (como usar solo con atributos de datos (no es necesario JS). He dejado el código a continuación, pero no es lo mismo que lo que está en GitHub.

Me gustó la versión puramente CSS, pero es bueno tener un retraso antes de que se cierre, ya que por lo general es una mejor experiencia de usuario (es decir, no castigado por un deslizamiento del ratón que va 1 px fuera del menú desplegable, etc), y como se menciona en los comentarios, hay que 1px de margen con el que tienes que lidiar o, a veces, el nav se cierra inesperadamente cuando te mueves al menú desplegable desde el botón original, etc.

He creado un pequeño plugin rápido que he utilizado en un par de sitios y ha funcionado muy bien. Cada elemento nav se maneja de forma independiente, por lo que tienen sus propios temporizadores de retardo, etc.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

El parámetro delay se explica por sí mismo, y el instantlyCloseOthers cerrará instantáneamente todos los demás menús desplegables que estén abiertos cuando pase el cursor sobre un uno nuevo.

No es CSS puro, pero con suerte ayudará a alguien más a esta hora tardía (es decir, este es un hilo viejo).

Si lo desea, puede ver los diferentes procesos por los que pasé (en una discusión en el IRC #concrete5) para que funcione a través de los diferentes pasos en esta esencia: https://gist.github.com/3876924

El enfoque de patrón de plugin es mucho más limpio para soportar temporizadores individuales, etc.

Vea la entrada del blog para más información.

Esto funcionó para mí:

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

Esto está integrado en Bootstrap 3. Simplemente agregue esto a su CSS:

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

Aún mejor con jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Puede usar el método predeterminado $().dropdown('toggle') para alternar el menú desplegable al pasar el cursor:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Solo quiero agregar, que si tienes múltiples desplegables (como yo) debes escribir:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Y funcionará correctamente.

La mejor manera de hacerlo es simplemente activar el evento de clic de Bootstrap con un hover. De esta manera, debe seguir siendo compatible con dispositivos táctiles.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

En mi opinión, la mejor manera es así:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Marcado de muestra:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Lo he conseguido de la siguiente manera:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Espero que esto ayude a alguien...

También se agregó margin-top:0 para restablecer el margen css de bootstrap para .menú desplegable para que la lista de menús no desaparezca cuando el usuario pasa lentamente del menú desplegable a la lista de menús.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}

Esto es probablemente una idea estúpida, pero para eliminar la flecha que apunta hacia abajo, puede eliminar la

<b class="caret"></b>

Esto no hace nada para el que apunta hacia arriba, sin embargo...

He publicado un complemento apropiado para la funcionalidad de desplazamiento desplegable de Bootstrap 3, en la que incluso puede definir lo que sucede al hacer clic en el elemento dropdown-toggle (el clic puede deshabilitarse):

Https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

¿Por qué lo hice cuando ya hay muchas soluciones?

Tuve problemas con todas las soluciones existentes anteriormente. Los CSS simples no están usando la clase .open en el .dropdown, por lo que no habrá comentarios en el elemento de alternancia desplegable cuando el menú desplegable esté visible.

Los js están interfiriendo con hacer clic en .dropdown-toggle, por lo que el menú desplegable se muestra al pasar el mouse, luego lo oculta al hacer clic en un menú desplegable abierto, y al mover el mouse se activará el menú desplegable para volver a aparecer. Algunas de las soluciones de js están rompiendo la compatibilidad con iOS, algunos complementos no funcionan en los navegadores de escritorio modernos que admiten los eventos táctiles.

Es por eso que hice el Bootstrap Desplegable Hover plugin que evita todos estos problemas mediante usando solo la API estándar de javascript de Bootstrap, sin ningún hack. Incluso los atributos de Aria están funcionando bien con este plugin.

Use este código para abrir el submenú en mousehover (solo escritorio):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

Y si quieres que se pueda hacer clic en el menú del primer nivel, incluso en el móvil, agrega esto:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

El submenú (menú desplegable) se abrirá con mousehover en el escritorio, y con clic/toque en el móvil y la tableta. Una vez abierto el submenú, un segundo clic le permitirá abrir el enlace. Gracias al if ($(window).width() > 767), el submenú tomará el ancho de pantalla completa en el móvil.

$('.dropdown').hover(function(e){$(this).addClass('open')})

Esto ocultará los up

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Esto debe ocultar los menús desplegables y sus casillas si son más pequeños que una tableta.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

La solución de jQuery es buena, pero tendrá que lidiar con eventos de clic (para móviles o tabletas) ya que hover no funcionará correctamente... ¿Tal vez podría hacer alguna detección de cambio de tamaño de la ventana?

La respuesta de Andres Ilich parece funcionar bien, pero debería estar envuelta en una consulta de medios:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

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

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

Sobrescribir bootstrap.js con este guión.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

Aquí está mi técnica que agrega un ligero retraso antes de que el menú se cierre después de que deje de flotar en el menú o el botón de conmutación. El <button> que normalmente haría clic para mostrar el menú de navegación es #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Para mejorar la respuesta de Sudharshan, envuelvo esto en una consulta de medios para evitar que se pase el ratón sobre anchos de pantalla XS...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Tampoco se requiere el símbolo de marcado, solo la clase desplegable para el li.

Esto funciona para WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Así que 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 un evento de clic, y desea que funcione en un evento de hover. Esto es muy simple, simplemente 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 ratón por el botón mostramos el menú, y cuando dejamos el ratón por el 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ás en el menú, el tiempo se restablece y puedes quedarte allí tantas veces como quieras. 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, siéntase libre de hacerme preguntas.

Para el cuadro... No he visto a nadie especificando CSS simple que bloquee totalmente el caret.

Aquí tienes:

.caret {
    display: none !important;
}