Vertical CSS discesa Tutorial Menu

March 9

Quando si progetta un sito web, è possibile creare un menu verticale a discesa utilizzando HTML e CSS. È necessario HTML per creare il menu in una pagina Web, compresi quanti menu delle opzioni che ti serve e quanti valori a discesa per ciascuna. È quindi necessario CSS per impostare i valori presentazione e la configurazione del menu. Quando un visitatore si libra il mouse su una delle opzioni del menu, un elenco a discesa con più opzioni sembra aiutare il visitatore navigare attraverso il vostro sito web.

istruzione

File HTML

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

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

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

2 Digitare il seguente nell'elemento <body>:

<Ul id = "discesa">

<Li> <a href="index.html"> casa </a> </ li>

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

<Ul>

<Li> <a href="option1.html"> Opzione 1 </a> </ li>

<Li> <a href="option2.html"> Opzione 2 </a> </ li>

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

</ Ul>

</ Li>

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

<Ul>

<Li> <a href="option1.html"> Opzione 1 </a> </ li>

<Li> <a href="option2.html"> Opzione 2 </a> </ li>

</ Ul>

</ Li>

</ Ul>

Queste linee creano il menu HTML e elenchi a discesa. Aggiungere, modificare e rimuovere le voci di menu in base alle esigenze. Si noti che le opzioni di menu che non dispongono di elenchi a discesa, come ad esempio l'opzione "Home", non utilizzare il tag <ul>, ma l'intero menu utilizza un tag <ul> e riferimenti un id denominato "discesa" in file CSS.

3 Salvare il file HTML.

File CSS

4 Aprire il file CSS. Digitare quanto segue:

ul # discesa {

list-style: none;

}

Per impostazione predefinita, le liste non ordinate utilizzano punti elenco accanto testo. Questo selettore rimuove i punti di pallottola per le liste non ordinate che chiamano la id "discesa", come quello sul file HTML.

5 Digitare quanto segue:

ul # discesa li, ul # discesa li ul li {

float: left;

width: 75px;

}

La proprietà "float" allinea voci del menu orizzontale. Rimuovere questa proprietà se si desidera che il menu per visualizzare gli elementi verticalmente in un elenco. I "width" insiemi di proprietà la larghezza di ogni voce di menu è. Modificare questo valore se necessario in modo che ogni voce del menu si adatta senza alcuna sovrapposizione.

6 Digitare quanto segue:

Li ul {

display: none;

position: absolute;

width: 75px;

}

Per impostazione predefinita, le opzioni a discesa appaiono sullo schermo. La proprietà "display" in questo selettore li nasconde. La proprietà "posizione" li pone in una posizione fissa sotto la categoria.

7 Digitare quanto segue:

li: hover ul, li.over ul {

blocco di visualizzazione;

}

La proprietà "display" qui mostra le opzioni a discesa quando un visitatore si libra il mouse su una categoria. Quando il mouse si spegne di una categoria di menu, le opzioni a discesa scomparire di nuovo.

8 Salvare il file CSS.