Como criar um menu suspenso horizontal em HTML

A navegação tradicional na Web normalmente mostra os elementos de um menu com um menu suspenso que aparece verticalmente na tela, mas como fazê-los cair horizontalmente se o design do site exigir? Como o HTML por si só não é compatível com os menus suspensos horizontais, você precisará usar as folhas de estilo em cascata (CSS) para tornar isso possível. O CSS permite plotar a posição dos elementos em uma página, como elementos de navegação, o que possibilita a implementação de um menu suspenso horizontal não tradicional em sua página da web.

Passo 1

Abra um editor HTML ou o Bloco de Notas e escreva a estrutura da sua página Conteúdo do cabeçalho aqui Conteúdo do corpo aqui.

Etapa 2

Escreva sua estrutura de menus usando tags de lista não ordenadas em tags HTML. Para criar submenus, faça uma lista bagunçada no item principal da lista. O código a seguir é um exemplo de uma estrutura de menus com um submenu:

Etapa 3

Escreva sua folha de estilo dentro das tags do seu documento HTML. Para iniciar o código CSS, use tags

Etapa 4

Remova o estilo padrão da lista bagunçada como marcadores e recuos, usando o seguinte código CSS:

ul {estilo da lista: nenhum; largura: 100px; margem: 0; estofamento: 0; }

Especifique a largura do seu menu usando o atributo “width”.

Etapa 5

Defina a posição do seu menu principal como “relativo”.

ul li {posição: relativa; }

Etapa 6

Defina a posição do submenu para que ele apareça ao lado de seu elemento principal:

li ul {display: nenhum; posição: absoluta; esquerda: 99px; topo: 0; }

Etapa 7

Adicione uma propriedade de suspensão. Isso ativará o submenu “suspenso” horizontalmente quando você passar o mouse sobre o item do menu principal.

li: pairar ul {exibição: bloco; }

Referências

 

Você pode estar interessado:

Deixe um comentário