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

Para criar a parte do menu suspenso. Em seguida, inicie a lista não ordenada usando o HTML "UL" Element.

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:


  • item superior




  • 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.

    OUTRAS LÍNGUAS

    Este artigo foi útil? Obrigado pelo feedback Obrigado pelo feedback

    Como podemos ajudar? Como podemos ajudar?