Como criar um menu Drop Down HTML e Submenu

Menus drop-down - também conhecido como "suckerfish" menus - usar uma combinação de HTML e CSS (Cascading Style Sheets) para a estrutura e estilo. A parte HTML de um menu drop-down consiste em listas de bala e listas com marcadores aninhados. Depois de estilo da barra de menu e principais links de navegação em CSS, você estilo das listas de bala aninhados como submenus. o ":flutuar" selector na CSS permite que você altere a propriedade de exibição de um submenu oculto para "quadra" para torná-lo reaparecer.

Codificar seu menu em HTML usando a "

" tags:

Adicionar uma div clara-fix antes do fim da lista. Você irá adicionar um estilo para o "clearfix" classe para fazer o fundo do menu de esticar para baixo.

Adicione a sua submenu como uma nova lista não ordenada aninhada dentro de seu vínculo mãe da "

" tags:

link 1

link 2


link 1
link 2
A ligação 3

A ligação 3

Abra sua folha de estilo, e seu estilo de menu utilizando CSS. Remova ambos os marcadores e esquerda; travessão:

cardápio {

list-style: none;

padding: 0;

}

Observe que "#cardápio" corresponda ao nome do ID do código de exemplo HTML.

Adicionar uma cor de fundo para sua barra de menu:

cardápio {

list-style: none;

padding: 0;

background-color: darkblue;

}

Flutuar os itens do menu à esquerda para que eles se alinham horizontalmente na barra de menu:

li menu de {

float: left;

}

Estilizar as ligações que compõem os itens de menu. Adicionar estofo para as ligações para alinhá-los verticalmente na barra de menu, enquanto tornando-os mais fáceis de clicar e passar o mouse sobre. Você deve alterar o "exibição" propriedade para "quadra" para adicionar padding para links:

Li menu de um {

display: block;

padding: 15px 8px;

text-align: center;

cor branca;

font-weight: bold;

text-decoration: none;

}

Note-se que na "preenchimento," dois valores foram definidos. O primeiro valor é o preenchimento vertical, enquanto os efeitos de segunda estofamento horizontal.

O estilo do submenu e seus itens. Você primeiro precisa posicionar o submenu. Retire as balas e preenchimento do submenus, bem como:

ul menu de {

position: absolute;

list-style: none;

padding: 0;

}

Retire os carros alegóricos à esquerda do itens na submenus:

li menu de ul {

clear: left;

}

Adicionar "Dsiplay: nenhum" ao "#menu ul" governar para desligar o submenu, desde que você não quer que ele apareça a menos que o usuário passa sobre o item pai. Fazer o menu aparecer novamente usando este código:

li Menu: hover {ul

dipslay: block;

}

Adicione o "correção clara" regra à sua div:

.clearfix {

limpar ambos;

}

dicas & avisos

Adicionar destacando a seus itens de menu quando o usuário passa o mouse sobre eles. Uma regra de estilo para alterar a cor de um link pairou-sobre o fundo parece "#menu a: hover {}".
Uma vez que você terminar de construir seu menu usando HTML e CSS, você pode adicionar um plugin jQuery para fazer animações agradável para os menus suspensos.

De esta maneira? Compartilhar em redes sociais: