Cascading Style Sheets (CSS) possono essere usati per creare menu a discesa senza l'utilizzo di un linguaggio di scripting, come JavaScript. Le voci di menu sono nascosti fino a quando l'utente passa sopra l'elemento superiore del menu. Il resto delle voci di menu apparirà sul resto del contenuto della pagina senza spostare il contenuto. Se fatto correttamente, viene visualizzato il menu se non è abilitato JavaScript nel browser web.

istruzione

1 Aprire qualsiasi editor di testo, come Blocco note di Windows.

2 Crea lo stile per la voce di menu in alto digitando le tre linee seguenti.

cadere li.top {font-family: Verdana, Geneva, san-serif

ANDARE
font-size: 100%
ANDARE
color: # FF00FF;}

3 Crea lo stile per le voci di menu supplementari digitando le seguenti quattro righe.

goccia ul .link {display: none

ANDARE
font-family: Verdana, Geneva, san-serif
ANDARE
font-size: 75%
ANDARE
color: # 0000FF;}

La sezione \ "display: none; \", dice per nascondere le voci di default.

4 Tipo \ "ul # goccia: hover .link {display: block;} \" al fine di mostrare gli elementi secondari quando l'utente passa sopra la voce di menu in alto.

5 Tipo \ "# goccia {position: absolute;} \" per garantire che il menu a discesa appare sulla parte superiore del contenuto di sotto senza spostare esso.

6 Creare il menu digitando le seguenti sette righe all'interno della sezione corpo del documento HTML.

<Div id = \ "caduta \">
<Ul id = \ "testa \">
<Li class = \ "top \"> Top </ li>
<Li class = \ "collegamento \"> <a href=\"#\"> Articolo 1 </a> </ li>
<Li class = \ "collegamento \"> <a href=\"#\"> Articolo 2 </a> </ li>
<Li class = \ "collegamento \"> <a href=\"#\"> Articolo 3 </a> </ li>
</ Ul> </ div>

7 Salvare e chiudere il documento.

Consigli e avvertenze

• Il secondo riferimento per questo articolo ti dice di \ "visualizzare il codice sorgente. \" In Firefox, fare clic su \ "Visualizza origine \" sotto il menu "Visualizza \" \ in un browser Firefox. In Internet Explorer, scegliere \ "Source \" sotto il \ menu "Visualizza \".