Navigazione tradizionale su siti Web normalmente Mostra voci di menu con un menu a discesa che appare verticalmente sullo schermo, ma come si fa a fare cadere in orizzontale se la progettazione del sito lo richiede? Poiché HTML da solo non supporta orizzontali menu a discesa, è necessario utilizzare Cascading Style Sheets (CSS) per rendere questo possibile. CSS consente di tracciare la posizione degli elementi in una pagina, ad esempio elementi di navigazione, rendendo possibile per l'implementazione di un menu a discesa orizzontale non tradizionali sul tuo sito Web.

Istruzioni

1

Aprire un editor HTML o blocco note e digitare fuori la struttura della pagina HTML:

< head >

Contenuto di testa qui

< / head >

< corpo >

Contenuto del corpo qui.

< / body >

2

Digitare nella vostra struttura di menu utilizzando i tag di elenco non ordinato all'interno dei tag HTML < body >. Per costruire i sottomenu, fare un elenco non ordinato all'interno dell'elemento di elenco principale. Il codice riportato di seguito è un esempio di una struttura di menu con un sottomenu:

< ul >

<li><a href="appetizers.html">Appetizers</a></li>

<li><a href="entrées.html">Entrées</a>

<ul>

<li><a href="meat.html">Meat</a></li>

<li><a href="seafood.html">Seafood</a></li>

<li><a href="pasta.html">Pasta</a></li>

</ul>

</li>

</UL >

3

Digitare nel vostro foglio di stile all'interno dei tag < head > del documento HTML. Per iniziare il codice CSS, è possibile utilizzare tag < style >:

< style >

Qui il codice CSS.

< / stile >

4

Rimuovere lo stile predefinito dell'elenco non ordinato come proiettili e rientri, utilizzando il seguente codice CSS:

UL {

list-style: none;

width: 100px;

margin: 0;

padding: 0;

}

Specificare la larghezza del menu utilizzando l'attributo di "larghezza".

5

Impostare la posizione del tuo menu principale al "parente".

li ul {

position: relative;

}6

Definire la posizione del sub-menu per far apparire accanto alla voce padre:

li ul {

display: none;

position: absolute;

left: 99px;

top: 0;

}7

Aggiungere una proprietà al passaggio del mouse. In questo modo il sottomenu di "discesa" orizzontalmente quando passi il mouse sopra la voce di menu principale.

li:hover ul {

display: block;

}

Consigli & Avvertenze

• È possibile scegliere per il vostro menu di stile aggiungendo colore e i bordi per le voci di menu tramite CSS.
• Come parte del codice CSS potrebbe essere visualizzato in modo diverso su diversi browser, soprattutto Internet Explorer, è possibile testare il codice su più browser per vedere eventuali discrepanze. Potrebbe essere necessario modificare il codice di farlo apparire uniformi per diversi browser.