Com a ajuda de um código HTML competente e regras CSS simples, você pode criar um menu pop-up, complementá-lo e modificá-lo. Usando as tabelas em cascata e as ferramentas de linguagem de marcação, você pode garantir que o próprio menu funcione corretamente em todos os navegadores.
Instruções
Passo 1
Segure a barra de menu básica primeiro. Crie uma lista numerada especial com um submenu em um editor de texto. Normalmente, o "Bloco de notas" é usado para esses fins. O submenu atua como um elemento da lista pai. Por exemplo: Primeiro ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Passo 2
Salve esta lista em um arquivo html separado. Em seguida, crie um arquivo.css. Insira todos os parâmetros de folha de estilo necessários. Faça isso com muito cuidado, porque um erro e o menu pop-up não serão exibidos corretamente ou nem funcionarão.
etapa 3
Remova todos os marcadores e preenchimento aplicados na lista de marcadores. Defina a largura do menu usando as ferramentas CSS: ul -style: nenhum; largura: 200px; }
Passo 4
Marque a posição relativa de todos os itens da lista com um atributo denominado posição: ul li: relativa; }
Etapa 5
Em seguida, organize o submenu, cujos elementos aparecerão do menu pai à direita quando o cursor do mouse estiver sobre o item: li ul: absoluto; left: 199px; top: 0; display: none; }
Etapa 6
O atributo esquerdo é um pixel a menos que a largura do próprio menu. Isso permite que os itens pop-up sejam posicionados corretamente sem criar bordas duplas. O atributo display é usado para ocultar o submenu ao abrir a página.
Etapa 7
Defina o estilo dos links conforme necessário usando as opções de css apropriadas. Inclua o parâmetro display: block para que os links ocupem todo o espaço reservado para eles. Para fazer o menu aparecer quando o cursor do mouse estiver passando sobre ele, digite o seguinte código: li: hover ul: block; }
Etapa 8
Defina opções adicionais para exibir itens de lista e links conforme desejado. Inclui um atributo no arquivo.html. O menu pop-up está pronto para ser usado.
