Instruções gratuitas passo a passo 
Crie um menu suspenso com html e css
Com um menu suspenso você cria uma visão geral clara e hierárquica de todas as partes importantes da página e das subseções que a página contém. Você só precisa mover o mouse sobre as seções principais para que as subseções apareçam. Você pode criar um menu suspenso usando apenas HTML e CSS.
Degraus
Parte 1 de 2: Escrevendo o HTML
1. Crie sua seção de navegação. Normalmente você usa
2. Dê a cada seção um atributo de classe. Usaremos o atributo class posteriormente para estilizar esses elementos com CSS. Dê ao contêiner e ao menu seu próprio atributo de classe.
classe="invólucro de navegação"> classe="menu de navegação"> 
3. Adicionar uma lista de itens de menu. A lista não ordenada ( 
4. Adicionar links. Se esses itens de menu de nível superior também estiverem vinculados a suas próprias páginas, agora você poderá inserir os links. Link para uma âncora inexistente (como "#!"), mesmo que eles não vinculem a nada, então o cursor do usuário parece diferente. Neste exemplo, Contato não leva a lugar algum, mas os outros dois itens de menu sim:
5. Crie sublistas para os itens suspensos. Depois que o estilo é criado, essas listas formam o menu suspenso. Coloque a lista no item de lista sobre o qual o usuário passará o mouse. Adicione um atributo de classe e um link como antes.
-
Parte 2 de 2: Escrevendo o CSS
1. Abra sua folha de estilo CSS. Coloque um link para sua folha de estilo CSS na seção principal do seu documento HTML se o link ainda não estiver lá. Neste artigo, não abordaremos o básico do CSS, como definir uma fonte e cor de fundo.
2. Adicionar código clearfix. Você se lembra de quando recebeu o "correção clara"-classe para a lista de menus? Normalmente, os elementos do menu suspenso têm um fundo transparente, o que permite que outros elementos sejam deslocados. Um simples ajuste de CSS pode corrigir esse problema. Aqui está uma solução rápida e agradável, embora não funcione no Internet Explorer 7 e versões anteriores:- .clearfix:depois de {
- contente: "";
- exibição: mesa;
- }
3. Crie o projeto básico. Com este código, você pode colocar seu menu no topo da página e ocultar os elementos suspensos. Isso é muito sóbrio de propósito, para que possamos nos concentrar no código relevante. Você pode personalizá-lo posteriormente com código CSS adicional, como preenchimento e margem.- .invólucro de navegação {
- largura: 100%;
- fundo: #008B8B;
- }
- .menu de navegação {
- posição: relativa;
- exibição: bloco embutido;
- }
- .submenu {
- posição: absoluta;
- Mostrar nenhum;
- fundo: #555;
- }
4. Faça os itens suspensos aparecerem quando você passar o mouse sobre eles. Os elementos na lista suspensa agora estão definidos para que não sejam mostrados. Veja como fazer com que uma sublista inteira apareça quando você estiver sobre o "pai" movimentos:- .menu de navegação ul li:hover > ul {
- exibição: bloco;
- }
- Observação — se os itens de menu no menu suspenso contiverem menus adicionais, as propriedades adicionadas aqui serão aplicadas a todos os menus. Se você quiser que o estilo se aplique apenas ao primeiro nível das listas suspensas, use ".menu de navegação > ul".
5. Indique com uma seta que existe um menu suspenso. Web designers normalmente mostram com uma seta para baixo que um elemento abre um menu suspenso. Este código adiciona essa seta a todos os elementos do seu menu:- .menu de navegação > ul > li:depois de {
- contente: "25BC"; /*Escape Unicode para a seta para baixo*/
- tamanho da fonte: .5em;
- exibição: bloco;
- posição: absoluta;
- }
- Nota — Ajuste a posição da seta usando as propriedades superior, inferior, direita ou esquerda eigenschappen.
- Nota — Se nem todos os seus itens de menu tiverem menus suspensos, não redesenhe todo o menu de navegação de classe. Em vez disso, adicione outra classe (como dropdown) a cada elemento li onde você deseja uma seta. Consulte essa classe no código acima.
6. Ajuste o preenchimento, o plano de fundo e outras propriedades. O menu deve funcionar agora, mas ainda não está muito bonito. As propriedades em CSS permitem que você personalize a aparência de cada classe ou elemento e onde eles estão localizados.Pontas
- Se você deseja adicionar um menu suspenso a um formulário, é muito fácil em HTML5 com o elemento
- com o link
- Se você copiar e colar o código de exemplo, remova todos os marcadores.
Artigos sobre o tópico "Crie um menu suspenso com html e css"
Оцените, пожалуйста статью
