Menus suspensos CSS
As barras de navegação alinhavam links numa fila. Um menu suspenso acrescenta um painel aninhado que abre sob um gatilho — em geral no hover e, de preferência, também quando o foco do teclado entra nele. Domine um padrão CSS calmo antes de inventar mega-menus gigantes.
Uma caixa de ferramentas de menus suspensos
📊 Menus suspensos em resumo
| Peça | Trabalho do dia a dia |
|---|---|
| Gatilho relative | O li pai (ou wrapper) vira âncora de posicionamento |
| Painel absolute | O menu aninhado fica sob o gatilho (top: 100%) |
| Oculto por padrão | display: none ou fora da tela até abrir |
Revelar :hover |
O ponteiro abre o painel |
:focus-within |
Usuários de teclado podem abrir/manter o painel ao tabular |
z-index |
Mantém o painel aberto acima do conteúdo seguinte |
Menus suspensos só com CSS são um clássico didático. Produtos reais costumam acrescentar JS para alternar no toque, fechar com Escape e acessibilidade mais rica — aprenda primeiro o esqueleto CSS aqui.
Gatilho relative, lista aninhada
Mantenha o link gatilho na barra superior e aninhe uma segunda lista para o submenu. O item pai precisa estar posicionado para que filhos absolute saibam seu lar.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Painel absolute sob o gatilho
Coloque o submenu com position: absolute, fixe-o na base do gatilho e dê um fundo sólido para o texto da página não vazar.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Ocultar até abrir
Deixe o painel fechado por padrão. Abrir tudo de uma vez anula o sentido do menu suspenso.
.nav .submenu {
display: none;
}
Revelar no hover
Quando o ponteiro repousa no item pai, mostre o painel. Padding no gatilho ajuda a evitar fechamentos acidentais na borda.
.nav > li:hover > .submenu {
display: block;
}
Prefira também focus-within
Só hover falha para usuários de teclado. :focus-within mantém o painel aberto enquanto o foco está dentro do item — um upgrade CSS calmo.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
Um hábito calmo de menu suspenso
Pai relative, painel absolute, oculto por padrão, hover + focus-within, z-index modesto. Deixe mega-menus com clique e ARIA complexa para padrões mais ricos depois — não confunda com a lição de barras de navegação planas.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
Experimente você
- Torne cada
lide nível superiorposition: relative. - Aninhe uma lista
.submenue posicioneabsolute; top: 100%; left: 0. - Oculte com
display: nonee mostre emli:hover. - Acrescente
:focus-withinpara o foco do teclado também abrir o painel. - Aumente o
z-indexe anote quando acrescentaria JS para alternar no toque.
Erros comuns
- Submenu absolute sem pai relative (o painel salta para longe)
- Deixar o submenu visível por padrão
- Remover estilos de foco e perder usuários de teclado
- Construir um mega-menu JS completo antes de aprender este esqueleto CSS
- Tratar menus suspensos como a lição inteira de layout da página
Resumo
- Menus suspensos aninham um painel sob um gatilho relative
- Absolute +
top: 100%fixa o menu abaixo do link - Oculte por padrão; revele com hover e focus-within
- Use z-index para o painel cobrir o conteúdo
- Barras planas vieram primeiro; menus aninhados são esta lição
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo