Como faço para criar menus CSS suspensos?
As folhas de estilo em cascata (CSS) são um nome usado para descrever a maneira como um documento Hyper Text Markup Language (HTML) ou Languagem de marcação extensível (XML) é formatada. Ele pode ser usado para qualquer tipo de documento XML, mas é mais frequentemente usado com páginas da web escritas no HTML. O CSS pode ser usado para criar menus suspensos nas páginas da web. Os menus de suspensão CSS têm um único item de texto mostrado até que o visitante use o mouse para pairar sobre o menu, momento em que toda a lista de itens é mostrada. O menu é criado usando as tags de identificação e classe CSS. Este seletor se parece com #. É seguido pelo nome do ID. Você pode nomear o ID qualquer coisa, mas deve ser descritivo para que outros possam ler seu código. Por exemplo, um menu suspenso pode usar o código #Drop1.
Criar a classe para o primeiro item no menu CSS suspenso usando o seletor de classe, que parece um período. A classe fará parte do elemento de lista HTML. O elemento da lista é designado pelos personagens "Li". Crie a classe de nível superior digitando "li.top". A descrição da classe está contida entre dois aparelhos encaracolados.
O exemplo a seguir mostra todo o código CSS para o primeiro item da lista:
#Drop1 li.top {Font-Family: Verdana, Genebra, San-Serif;
Size da fonte: 100%;
Cor: #ff00ff;}
Em seguida, crie uma classe para os itens que estarão ocultos abaixo do primeiro item no menu CSS. A classe descreverá a lista HTML não ordenada, que é designada com os personagens "UL". A descrição parecerá essencialmente a mesma do item de menu de nível superior, com a adição das palavras "Display: Nenhum#59" no início da descrição. Isso indica que os itens na lista não ordenada estarão ocultos até que o ponteiro paira sobre o menu CSS suspenso.
o seguinteé um exemplo desta parte do código CSS:
#drop1 ul.link {
Exibição: Nenhum#59
Font-Family: Verdana, Genebra, San-Serif;
Size da fonte: 100%;
Cor: #ff00ff;}
Você deseja que o menu CSS suspenso apareça no restante do documento HMTL. Caso contrário, quando o visitante paira sobre o menu, ele empurrará o restante do documento para baixo na página para abrir espaço para a lista. Definir o elemento de posição como absoluto, fará isso.
O código para definir a posição é:
#Drop1 {Posição: Absoluto;}
Isso é tudo o que é necessário para a parte CSS do menu suspenso. O restante do menu CSS suspenso é criado no documento HTML usando os elementos "Div", "ID", "Classe", "Li" e "Ul". A tag "Div" separa a parte do menu do documento. TIPO
Adicione a classe superior ao primeiro item da lista e a classe Link para o restante dos itens. O código HTML deve ser semelhante a:
Quando você abre o documento em um navegador da web, o menu CSS suspenso aparecerá como um único item na página. Quando você move o mouse sobre o item superior, o restante do menu aparecerá. O restante do texto na página não se moverá, mas uma parte será oculta pelo menu.