Como criar um menu suspenso no HTML usando CSS?

Um menu suspenso é uma maneira de deixar o usuário explorar diferentes opções disponíveis para ele ao usar um site. Estes são um tanto um widget necessário ao projetar um site. O CSS permite criar menus suspensos de boa aparência que tornam em geral aumentar a experiência do usuário e embelezar a aparência do seu site. Esta postagem é composta para fornecer:

1. Criando uma caixa suspensa
2. Criando um menu suspenso

Vamos começar

Criando uma caixa suspensa

Muitas vezes você deve ter visto que, quando você traz o cursor do mouse sobre um pedaço de texto ou um botão em um site, uma caixa suspensa aparece. Aqui está como é feito.

Exemplo

Este exemplo demonstra a criação de uma caixa suspensa.

Html

Traga o mouse aqui

Clique em mim

Para fazer uma caixa suspensa, antes de tudo, fizemos um recipiente de div para colocar o conteúdo da caixa suspensa dentro dela, além disso, para abrir a caixa suspensa, usamos um elemento.

CSS

.suspenso
Posição: relativa;
Exibição: bloco embutido;

A classe "suspensa" foi atribuída ao primeiro contêiner de divindora que aninha o todo o conteúdo. Definimos sua posição para parente para que, quando o menu suspenso se abre, ele seja colocado logo abaixo do botão.

CSS

.conteúdo suspenso
Mostrar nenhum;
Background-Color: Whitesmoke;
largura: 100%;
preenchimento: 15px;

O contêiner DIV que contém o conteúdo suspenso foi atribuído à classe "Conteúdo suspenso". Além disso, definimos a tela para nenhum.

CSS

.DOWNDOWN: Passe o mouse .conteúdo suspenso
exibição: bloco;

Além disso, para tornar o suspensão pairável, atribuímos o: State Ofver e definimos sua tela para bloquear para que apareça abaixo do botão.

E, finalmente, também denominamos nosso botão de acordo com o nosso desejo.

botão
preenchimento: 5px;
Background-Color: trigo;
Fonte-família: Lucida Sans;

Saída

Uma caixa suspensa foi criada com sucesso. Agora vamos para criar um menu suspenso.

Criando um menu suspenso

Um menu suspenso consiste em uma lista de opções e só abre quando um usuário traz o cursor do mouse sobre ele. Você pode criar menu suspenso no seu site usando CSS. Siga o exemplo abaixo.

Html

Cardápio

Contate-nos
Sobre nós
Outro

Aqui adicionamos tags de âncora para fornecer várias opções no menu suspenso.

CSS

.Dropbtn
cor de fundo: salmão;
cor branca;
Largura: 100px;
preenchimento: 18px;
borda: 0;
Size da fonte: 17px;

Em primeiro lugar, nós fornecemos ao nosso botão algum estilo usando várias propriedades CSS.

CSS

.suspenso
Posição: relativa;
Exibição: bloco embutido;
Largura: 160px;

Como já explicado acima, definimos a posição da div com a classe "suspensa" para parente, para que, quando o menu suspenso abrir, ela é colocada logo abaixo do botão.

CSS

.conteúdo suspenso
Mostrar nenhum;
Background-Color: Whitesmoke;
largura: 100%;

Aqui estamos usando algumas propriedades básicas do CSS para estilizar nosso conteúdo suspenso.

CSS

.conteúdo suspenso A
exibição: bloco;
cor preta;
preenchimento: 12px;
Decoração de texto: Nenhum;

No código CSS acima, estamos estilizando os links presentes no menu suspenso. Definimos sua tela para bloquear para que cada link apareça em uma nova linha.

CSS

.DOWNDOWN: Passe o mouse .Dropbtn
Background-Color: Sandybrown;

.Conteúdo suspenso A: Hover
Background-Color: Lightgrey;

.DOWNDOWN: Passe o mouse .conteúdo suspenso
exibição: bloco;

Aqui estamos estilizando os efeitos do mouse para o botão de menu e menu suspenso.

Saída

É assim que você pode criar um menu suspenso com sucesso.

Conclusão

Um menu suspenso oferece a um usuário diferentes opções disponíveis para ele ao usar um site. Você pode criar esses menus suspensos usando diferentes propriedades CSS. Com o objetivo de criar uma caixa suspensa básica, você pode usar um contêiner Div e colocar o conteúdo suspenso dentro dele, além disso, usando as propriedades CSS, você pode dar algum estilo. Depois de aprender a criar uma caixa suspensa básica, você pode usar técnicas semelhantes para criar um menu suspenso. Este guia ensina como criar um menu suspenso com a ajuda de um exemplo apropriado.