Um bom menu suspenso pode ser criado não apenas em JavaScript, mas também usando tags HTML padrão. Este método de criação de um menu suspenso será útil para aqueles que estão apenas começando os primeiros passos na criação de sites e desejam simplificar o trabalho de criação de menus nas páginas.
Instruções
Passo 1
No código HTML, esse menu é uma lista não ordenada com listas aninhadas dentro. Para começar, crie um arquivo style.css e copie o seguinte código CSS para estilizar e formatar o menu:
#nav, #nav ul {
estilo de lista: nenhum;
margem: 0;
preenchimento: 0;
borda: 1px sólido # 000;
plano de fundo: # 515151;
flutuar: esquerda;
largura: 100%;
}
#nav li {
flutuar: esquerda;
posição: relativa;
cor de fundo: # 003366;
fundo / fundo: nenhum;
}
#nav li ul {
Mostrar nenhum;
posição: absoluta;
cor de fundo: # 003366;
preenchimento: 8px 0;
largura: 138px;
}
Passo 2
Agora precisamos adicionar alguma decoração aos itens do menu. Defina a largura e a altura deles, remova as linhas de sublinhado, defina uma largura clara para cada link e especifique as cores de fundo desejadas.
etapa 3
Para todas essas alterações, adicione o seguinte código ao arquivo:
#nav a {
cor: #fff;
decoração de texto: nenhum;
display: bloco;
largura: 120px;
preenchimento: 4px 10px;
cor de fundo: # 003366 repeat-y right;
}
#nav a: hover {
cor: # 000;
cor de fundo: # 0033FF;
}
#nav li: hover {
cor de fundo: # 333333;
}
Em seguida, adicione o seguinte trecho de código para finalizar o menu:
#nav li: hover li ul {
Mostrar nenhum;
largura: 138px;
topo: -9px;
esquerda: 133px;
}
#nav li: hover li: hover ul {
display: bloco;
}
Passo 4
Na versão HTML, a lista geral de menus não ordenados se parece com isso - com base, o menu é criado, o que foi mencionado no artigo.
- Casa
-
Catálogo
-
Todos os produtos
- Por data
- Fabricantes
- Outro
-
