Hvordan skrive en CSS Script for å legge til en rullegardinmeny

Cascading Style Sheets (CSS) kan brukes til å lage drop-down menyer uten å bruke et skriptspråk, for eksempel Javascript. Menyelementene er skjult inntil brukeren svever over toppen elementet på menyen. Resten av menyelementene vises over resten av sidens innhold uten å forskyve innholdet. Når det gjøres riktig, vil menyen vises om Javascript er aktivert i nettleseren.

Bruksanvisning

1 Åpne et tekstredigeringsprogram, for eksempel Windows notisblokk.

2 Opprett stilen for den øverste menyvalg ved å skrive følgende tre linjer.

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

GÅ
font-size: 100%
GÅ
color: # FF00FF;}

3 Opprett stilen for de ekstra menyvalg ved å skrive følgende fire linjer.

dråpe ul .link {display: none

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

Seksjonen \ "display: none; \" sier å skjule elementene som standard.

4 Type \ "# dråpe ul: hover .link {display: block;} \" for å vise de sekundære elementer når brukeren svever over toppen menyvalget.

5 Type \ "# dråpe {position: absolute;} \" for å sikre at rullegardinmeny vises på toppen av innholdet under uten å fortrenge det.

6 Lag menyen ved å skrive følgende sju linjene i kroppen delen av HTML-dokumentet.

<Div id = \ "drop \">
<Ul id = \ "head \">
<Li class = \ "top \"> Top </ li>
<Li class = \ "linken \"> <a href=\"#\"> Sak 1 </a> </ li>
<Li class = \ "linken \"> <a href=\"#\"> Sak 2 </a> </ li>
<Li class = \ "linken \"> <a href=\"#\"> Sak 3 </a> </ li>
</ Ul> </ div>

7 Lagre og lukk dokumentet.

Hint

• Den andre referanse for denne artikkelen forteller deg å \ "vise kildekoden. \" I Firefox, klikk \ "View Source \" under \ "Vis \" -menyen i nettleseren Firefox. I Internet Explorer \ "Source \" under \ "Vis \" -menyen.