Com a ajuda de um bom código HTML e regras CSS simples, você pode criar um menu pop-up agradável que pode ser facilmente modificado e complementado. Usando a linguagem de marcação e as folhas de estilo em cascata, você pode garantir que os menus funcionem corretamente em todos os navegadores.
Instruções
Passo 1
Primeiro, construa a estrutura básica do seu menu. Abra um editor de texto e crie uma lista numerada com um submenu que atua como um item da lista pai. Por exemplo:
-
Primeiro elemento
- Item suspenso
- Dropdown2
Passo 2
Salve a lista gerada em um arquivo html separado. A seguir, crie um arquivo com uma extensão.css e insira todos os parâmetros da folha de estilo.
etapa 3
Remova qualquer preenchimento e marcadores que se apliquem à lista de marcadores e defina a largura do menu usando as ferramentas CSS: ul {list-style: none;
largura: 200px; }
Passo 4
Defina a posição relativa de todos os itens na lista usando o atributo position: ul li {position: relative; }
Etapa 5
Em seguida, você precisa criar um submenu, cada um dos elementos que aparecerá à direita do menu pai no momento em que o ponteiro do mouse estiver sobre o item: li ul {position: absolute;
esquerda: 199px;
topo: 0;
Mostrar nenhum; } O atributo esquerdo é um pixel a menos que a largura do próprio menu. Isso permite que os itens pop-up sejam posicionados de maneira inteligente, sem criar bordas duplas. O atributo display é usado para ocultar o submenu ao abrir a página.
Etapa 6
Defina o estilo dos links conforme desejado usando as opções de css apropriadas. Inclua o parâmetro display: block para que cada link ocupe todo o espaço que reservou para ele.
Etapa 7
Para que o menu apareça no momento em que o cursor estiver sobre ele (pairar), é necessário inserir o código: li: hover ul {display: block; }
Etapa 8
Defina opções adicionais para exibir links e itens de lista conforme desejado.
Etapa 9
O menu pop-up está pronto. Agora resta incluir o atributo no arquivo.html: Menu pop-up
