Menus suspensos ativados ao passar o mouse no Twitter Bootstrap

Muitos usuários preferem que os menus do Bootstrap sejam suspensos ao passar o mouse, eliminando a necessidade de cliques explícitos . Este artigo aborda a funcionalidade de foco e a remoção de ícones de seta ao lado dos títulos dos menus.

Lista suspensa ativada por foco

Para ativar a lista suspensa automática ao passar o mouse, utilize CSS para direcione a opção de menu oculta. Adicione o seguinte código ao seu CSS:

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

Para designs responsivos, envolva o código em uma consulta de mídia:

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

Removendo o ícone de seta

• Bootstrap 3: Remova o HTML do elemento âncora .dropdown-toggle.
• Bootstrap 2 e inferior: Mire e remova as setas usando este CSS seletor:

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

Ao incorporar essas modificações CSS, você pode obter menus suspensos ativados por foco e eliminar ícones de seta, melhorando a experiência do usuário e personalizando seus menus Bootstrap conforme desejado.