I menu HTML più semplici sono costruite su liste non ordinate. Le liste vengono poi trasformati in menu più complesse usando i CSS il codice (Cascading Style Sheets). I sottomenu sono aggiunti per le liste non ordinate nidificazione all'interno voci di elenco. Mentre un menu di base della barra laterale in stile potrebbe mostrare un sottomenu come un elenco rientrato di link, è possibile anche farli funzionare come elenchi a discesa per le barre dei menu orizzontali. La tecnica per sottomenu a discesa è complessa, ma può essere fatto interamente in CSS.

istruzione

1 Aprire la pagina Web in un editor come Notepad e trovare il codice di menu:

<Ul id = "menu">
<Li> <a href="page1.html"> Page One </a> </ li>
<Li> <a href="page2.html"> pagina Due </a> </ li>
<Li> <a href="page3.html"> Pagina Tre </a> </ li>
<Li> <a href="page4.html"> pagina quattro </a> </ li>
</ Ul>

I menu sono generalmente codificate come liste non ordinate, come illustrato nell'esempio precedente.

2 Nest una nuova lista non ordinata all'interno delle "<li>" tag per il suo elemento di livello superiore:

<Ul id = "menu">
<Li> <a href="page1.html"> Page One </a> </ li>
<Li> <a href="page2.html"> Pagina Due </a>

<ul>
<li><a href=”page2a.html”>Page Two-A</a></li>
<li><a href=”page2b.html”>Page Two-B</a></li>
</ul>

</ Li>
<Li> <a href="page3.html"> Pagina Tre </a> </ li>
<Li> <a href="page4.html"> pagina quattro </a> </ li>
</ Ul>

3 Aprire il foglio di stile del tuo sito web e scrivere una nuova regola di stile per le nidificati "<ul>" tag. Impostare la posizione del sottomenu per "assoluta":

menù ul {

position: absolute;
}

Ciò mantiene un sottomenu a discesa da spingere altri contenuti verso il basso nella pagina. Il sottomenu sarà invece galleggiare sopra il contenuto della pagina.

4 Scrivi una nuova regola di stile per gli elementi della lista all'interno del sottomenu. Cancellare la sinistra-galleggiante che fa una barra orizzontale in modo che le voci del menu secondario sarà invece impilare verticalmente:

menù ul li {

clear: both;
width: 200px;
}

Aggiungere una larghezza, come mostrato, se si vuole. In caso contrario, il sottomenu si estenderà per adattarsi suoi elementi.

5 Creare una regola di stile che colpisce il sottomenu quando un utente passa il mouse sopra la sua voce di menu principale. Impostare display su "blocco" in modo che il sottomenu verrà visualizzato su un hover:

menù li: hover {ul

blocco di visualizzazione;
}

6 Torna alla regola di stile per il sottomenu e renderla nascosta per impostazione predefinita:

menù ul {

position: absolute;
display: none;
}

Ora un visitatore del sito deve passare il mouse sopra elemento principale del sottomenu per far apparire il sottomenu. Librarsi via lo fa scomparire di nuovo.

Consigli e avvertenze

• Se si sta creando un semplice menu laterale in stile tra cui elenchi di link, allora non c'è bisogno di andare oltre il secondo passo. Nest la lista non ordinata per il sottomenu e lo stile con un rientro: #menu ul {padding-left: 20px; }