Menús desplegables activados al pasar el mouse en Twitter Bootstrap

Muchos usuarios prefieren que sus menús Bootstrap se desplieguen al pasar el mouse, eliminando la necesidad de hacer clics explícitos . Este artículo aborda tanto la funcionalidad de desplazamiento como la eliminación de los íconos de flecha junto a los títulos de los menús.

Menú desplegable activado al pasar el mouse

Para habilitar el menú desplegable automático al pasar el mouse, utilice CSS para apunte a la opción del menú oculto. Agregue el siguiente código a su CSS:

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

Para diseños responsivos, ajuste el código en una consulta de medios:

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

Eliminar el icono de flecha

• Bootstrap 3: Elimina el HTML del elemento de anclaje .dropdown-toggle.
• Bootstrap 2 e inferiores: Apunte y elimine las flechas usando este CSS selector:

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

Al incorporar estas modificaciones de CSS, puede lograr menús desplegables activados al pasar el mouse y eliminar íconos de flecha, mejorando la experiencia del usuario y personalizando sus menús Bootstrap como desee.