April 20
navigazione tradizionale su siti web mostrano normalmente le voci di menu con un menu a tendina che appare in verticale sullo schermo, ma come si fa a cadere in senso orizzontale se la struttura del sito lo richiede? Dal momento che HTML da sola non supporta goccia orizzontale giù i menu, è necessario usare Cascading Style Sheets (CSS) per rendere questo possibile. CSS consente di mappare la posizione degli elementi in una pagina, come ad esempio elementi di navigazione, rendendo possibile per voi per implementare un menu non tradizionali orizzontale discesa sul tuo sito web.
1 Aprire un editor HTML o Blocco note e digitare la vostra struttura della pagina HTML:
<Head>
contenuti testa qui
</ Head>
<Body>
contenuti corpo qui.
</ Body>
2 Digitare la struttura del menu utilizzando i tag lista non ordinata all'interno del codice HTML <body>. Per costruire sotto-menu, fare una lista non ordinata all'interno della voce lista principale. Il codice che segue è un esempio di una struttura di menu con un sottomenu:
<Ul>
<li><a href="appetizers.html">Appetizers</a></li>
& Lt; li> & lt; a href = "entr & eacute; es.html"> Entr & eacute; es & lt; / a>
& Lt; ul>
& Lt; li> & lt; a href = "meat.html"> Carne & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "seafood.html"> Seafood & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "pasta.html"> Pasta & lt; / a> & lt; / li>
& Lt; / ul>
& Lt; / li>
</ Ul>
3 Digitare il proprio foglio di stile all'interno di <HEAD> tag del documento HTML. Per iniziare il codice CSS, utilizzare i tag <style>:
<Style>
codice CSS qui.
</ Style>
4 Rimuovere lo stile di default della lista non ordinata, come proiettili e rientri, utilizzando il seguente codice CSS:
ul {
list-style: none;
width: 100px;
margin: 0;
padding: 0;
}
Specificare larghezza del menu con l'attributo "larghezza".
5 Impostare la posizione del menu principale su "relativo".
ul li {
position: relative;
}
6 Definire la posizione del sottomenu per farla apparire accanto al suo elemento principale:
Li ul {
display: none;
position: absolute;
sinistra: 99px;
top: 0;
}
7 Aggiungere una proprietà hover. Ciò consente al sottomenu per "discesa" in orizzontale quando il mouse sopra la voce del menu principale.
li: hover {ul
display: block;
}