Criando a folha de estilo

Se você quiser que o menu vá em um arquivo HTML independente, você deve criar um espaço entre as tags e onde o código CSS irá. Escreva o seguinte no seu arquivo.

O espaço entre esses dois rótulos é sua folha de estilo. Se você estiver usando um arquivo CSS separado, adicione o seguinte em algum lugar nas tags "head":

Em seguida, crie um arquivo chamado "style.css", que será sua folha de estilo. Mantenha a folha de estilo no mesmo diretório que o arquivo HTML principal.

Criando o menu

Você deve criar um rótulo que contenha o menu para ir dentro deles. Adicione o seguinte à sua página HTML no local onde deseja que o menu seja:

Então você deve definir o divisor de menu. Adicione o seguinte código à sua folha de estilos:

menu {

largura: 200px; }

Adicione a esta entrada qualquer outro estilo CSS que você deseja que o divisor tenha; por exemplo, uma cor de fundo, bordas ou um tamanho diferente.

Marcação HTML

Adicione o código para o menu. O menu usará uma lista não ordenada:

. Adicione o seguinte código entre os rótulos do seu menu.
• Item de menu 1
  • Submenu do elemento 1
  • Submenu do elemento 2

Observe que os rótulos

dos submenus estão entre os rótulos
• e
para "Elemento 1 do menu". Isso informa ao navegador que o submenu está contido abaixo desse item de menu. Adapte o código acima para representar seu próprio menu, adicionando seus próprios URLs e submenus adicionais, se necessário

Estilo CSS

Neste ponto, o menu aparecerá, mas o submenu será sempre exibido. Você só precisa usar o atributo "display" para ocultar e revelar o submenu. Adicione o seguinte à sua folha de estilos:

menu li {posição: relativo;}

menu ul ul {

posição: absoluta; top: 0; esquerda: 100%; largura: 100 px; } div # menu ul ul {display: nenhum;} div # menu ul li: hover ul {display: bloco;}

Salve todos os arquivos. Seu menu suspenso está pronto.

Referências

• Tanfa.co.uk: Tutorial do menu pop-out CSS (tutorial do menu suspenso CSS)

Mais artigos

• Como criar um menu suspenso horizontal em HTML
• Como remover todos os estilos CSS de um DIV individual
• Como reduzir o espaço entre linhas em HTML
• Como inserir duas imagens horizontalmente com HTML
• Como sobrescrever o CSS nas classes DIV
• Como ancorar um DIV na parte inferior de uma página
• Como fazer uma linha vertical que separa o texto HTML de uma imagem