Prima dello sviluppo di fogli di stile CSS, Web designer ha usato una combinazione di Hypertext Markup Language e JavaScript per creare menu a discesa. Per circa un decennio, il tag "< select >" sono stati utilizzati per aggiungere menu di navigazione ai siti, ma maggior parte dei progettisti ora utilizzare l'elemento UL, o lista non ordinata,. Maggior parte degli elementi UL utilizzare testo, ma è possibile combinare HTML e CSS per creare un menu a discesa che utilizza immagini invece.

Istruzioni

1

Inserire il "< ul >" e "</UL >" tag tra il "< body >" e "< / body >" tag nel documento HTML:

< corpo >
< ul >
</UL >
< / body >

2

Inserto "< li >" e "< li >" tra i tag "< ul >" per creare il menu principale. Inserire il tag "< img >" tra i tag "< li >".

< ul >
< li >< img src = "URL" alt = "intestazione un" >< / li >
< li >< img src = "URL" alt = "intestazione b" >< / li >
</UL >

Sostituire "URL" con l'indirizzo completo collegamento a immagini il menu. Utilizzare la stessa formattazione, "< li >< img >< / li >", per aggiungere ulteriori elementi al menu. Sostituire il testo nel campo "alt" con una descrizione per ogni immagine.

3

Inserire il "< ul >" e "< li >" tag tra l'esistente "< li >" tag per aggiungere sottomenu. Per esempio:

< ul >
< li >< img src = "URL" alt = "intestazione un" >
< ul >
< li >< img src = "URL" alt = "sub-elemento un" >< / li >
</UL >
</li >
< li >< img src = "URL" alt = "intestazione b" >
< ul >
< li >< img src = "URL" alt = "voce secondaria b" >< / li >
< li >< img src = "URL" alt = "voce secondaria c" >< / li >
</UL >
</li >
</UL >

Inserire le immagini corrette per i sottomenu utilizzando la stessa procedura utilizzata per il menu principale. Sostituire i campi di "alt" con descrizioni di immagini.

4

Aggiungere il tag "< a >" a ogni elemento di "< li >" per collegare le voci di menu a una pagina specifica sul sito Web. Per esempio:

< li >< un href="page.html" >< img src = "URL" alt = "sub-elemento un" >< /a >< / li >

Sostituire "pagina" con l'indirizzo di collegamento al documento Web corretto.

5

Inserire il tag "< style >" all'intestazione del documento:

< head >
< style >
< / stile >
< / head >

6

Aggiungere il codice seguente tra i tag di "stile < >" formattare "< ul >" e il tag "< li >":

li {
list-style-type: none;
}

li ul {
float: left;
Larghezza: #px;
}

Sostituire "#" con la larghezza in pixel dell'immagine più grande.

7

Inserire il seguente codice tra i tag di "stile < >", seguono l'elemento "ul li", per convertire il menu in un menu a discesa:

ul li ul {
visibilità: nascosto;
}

ul li:hover ul {
visibilità: visibile;
display: inline;
}

Consigli & Avvertenze

• Se non vuoi che le voci di menu in alto per collegare a un'altra pagina del sito, inserire "#" nel campo "href" invece.