Verticale CSS Drop-Down Menu Tutorial

May 28

Quando si progetta un sito Web, è possibile creare un menu a discesa verticale utilizzando HTML e CSS. Avete bisogno di HTML per creare il menu in una pagina Web, tra cui quante opzioni di menu, è necessario e quanti valori di elenco a discesa per ciascuno. Poi è necessario CSS per impostare i valori di aspetto e il formato di menu. Quando un visitatore passa il mouse sopra una delle opzioni nel menu, viene visualizzato un elenco a discesa con più opzioni per aiutare il visitatore a navigare attraverso il tuo sito Web.

Istruzioni

File HTML

1

Aprire il file HTML in cui si desidera aggiungere un menu a discesa verticale. Digitare quanto segue nell'elemento < head >:

< link href="style.css" rel = "stylesheet" type = "text/css" / >

Modificare il valore di "href" al nome del file CSS, se necessario.

2

Digitare quanto segue nell'elemento < body >:

< ul id = "elenco a discesa" >

< li >< un href="index.html" > Home < /a >< / li >

< li >< un href="category1.html" > Categoria 1 < /a >

< ul >

< li >< un href="option1.html" > opzione 1 < /a >< / li >

< li >< un href="option2.html" > opzione 2 < /a >< / li >

< li >< un href="option3.html" > opzione 3 < /a >< / li >

</UL >

</li >

< li >< un href="category2.html" > Categoria 2 < /a >

< ul >

< li >< un href="option1.html" > opzione 1 < /a >< / li >

< li >< un href="option2.html" > opzione 2 < /a >< / li >

</UL >

</li >

</UL >

Queste linee creano il menu HTML ed elenchi a discesa. Aggiungere, modificare e rimuovere voci di menu in base alle necessità. Si noti che le opzioni di menu che non dispongono di elenchi a discesa, ad esempio l'opzione "Home", non utilizzare il tag < ul >, ma l'intero menu utilizza un tag < ul > e fa riferimento a un id chiamato "a tendina" nel file CSS.

3

Salvare il file HTML.

File CSS

4

Aprire il file CSS. Digitare quanto segue:

UL #dropdown {

list-style: none;

}

Per impostazione predefinita, gli elenchi non ordinati utilizzano punti elenco accanto al testo. Questo selettore consente di rimuovere i punti elenco per gli elenchi non ordinati che chiamano l'id "a tendina", come quello sul file HTML.

5

Digitare quanto segue:

UL #dropdown li, li ul #dropdown ul li {

float: left;

Larghezza: 75px;

}

La proprietà "float" Allinea orizzontalmente gli elementi del menu. Rimuovere questa proprietà se si desidera il menu per visualizzare gli elementi in verticale in un elenco. La proprietà "width" imposta quanto ogni voce di menu è grande. Modificare questo valore in modo che ogni voce del menu si adatta senza alcuna sovrapposizione.

6

Digitare quanto segue:

li ul {

display: none;

Posizione: assoluta;

Larghezza: 75px;

}

Per impostazione predefinita, le opzioni di menu a discesa visualizzati sullo schermo. La proprietà "display" in questo selettore li nasconde. La proprietà di "posizione" li colloca in una posizione impostata sotto la categoria.

7

Digitare quanto segue:

li:hover ul, li.over ul {

display: block;

}

Questa è la sua proprietà "display" Mostra opzioni di elenco a discesa quando un visitatore passa il mouse su una categoria. Quando il mouse passa al largo di una categoria di menu, le opzioni di menu a discesa scompaiono di nuovo.

8

Salvare il file CSS.


Articoli Correlati