Como criar: Menu suspenso suspenso

Aprenda a usar CSS para criar menus suspensos suspenso.

Crie um menu suspenso suspenso

Crie um menu suspenso que apareça quando o usuário passar o mouse sobre o elemento.

Primeira etapa - Adicionar HTML:

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Exemplo de explicação:

Abra o menu suspenso usando qualquer elemento, por exemplo, o elemento <button>, <a> ou <p>.

Crie um menu suspenso usando o elemento de contêiner (como <div>) e adicione links de menu suspenso dentro dele.

Use o elemento <div> para envolver o botão e <div> para permitir que o CSS defina a posição correta do menu suspenso.

Segunda etapa - Adicionar CSS:

/* 下拉按钮 */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用于定位下拉菜单内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Conteúdo suspenso (oculto por padrão) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links dentro do menu suspenso */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Altera a cor do link do menu suspenso ao passar o mouse */
.dropdown-content a:hover {background-color: #ddd;}
/* Exibe o menu suspenso ao passar o mouse */
.dropdown:hover .dropdown-content {display: block;}
/* Altera a cor de fundo do botão suspenso ao exibir o conteúdo suspenso */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Experimente pessoalmente

Exemplo de explicação:

Já configuramos o estilo do botão do menu suspenso com cor de fundo, margem interna, etc.

.dropdown a classe position:relativequando queremos colocar o conteúdo do menu suspenso diretamente abaixo do botão do menu suspenso (usando position:absolute)

.dropdown-content A classe contém o menu suspenso real. Ela é oculta por padrão e será exibida ao passar o mouse (veja a seguir). Observe que o comprimento mínimo é configurado em 160px. Você pode alterar essa configuração a qualquer momento. Dica: Se você deseja que a largura do conteúdo do menu suspenso seja igual à largura do botão do menu suspenso, configure a largura em 100% (e configure overflow:auto para habilitar a rolagem em telas pequenas).

Não usamos borda, mas sim box-shadow Propriedade para tornar o menu suspenso parecido com uma 'carta'. Também usamos z-index Coloque o menu suspenso à frente de outros elementos.

:hover O seletor é usado para exibir o menu suspenso quando o usuário move o mouse sobre o botão do menu suspenso.

Páginas relacionadas

Tutorial: }}Menu suspenso CSS

Tutorial: }}Como criar um menu suspenso clicável