July 6
Cascading Style Sheets, o CSS, hanno riempito la maggior parte dei ruoli che Hypertext Markup Language o HTML, una volta tenuto; menu a discesa, noto anche come menu di collegamento, una volta erano sotto il dominio di HTML e JavaScript, ma ora sono codificati in CSS. menu di collegamento creato prima dello sviluppo dei CSS utilizzato i "<select>" e "<option>" tag, ma moderno navigazione del sito è stato creato utilizzando "<ul>" e "<li>." CSS cambia la formattazione del "<ul>" e "<li>" tag in modo che le opzioni a discesa appaiono quando il puntatore del mouse passa sopra il menu.
1 Inserisci "<ul>" e "</ ul>" tra i "<body>" e "</ body>" tag per creare una lista non ordinata:
<Body>
<Ul>
</ Ul>
</ Body>
2 Inserisci "<li>" e "</ li>" tra i le "<ul>" e "</ ul>" tag per creare il menu principale.
<Ul>
<Li> Opzione uno </ li>
<Li> Opzione due </ li>
</ Ul>
3 Inserire i tag "<ul>" e "<li>" tra il "<li>" tag circondano ogni opzione di menu esistente per creare il sottomenu:
<Ul>
<Li> Option One
<Ul>
<Li> sottomenu One </ li>
<Li> sottomenu Due </ li>
</ Ul>
</ Li>
<Li> Opzione Due
<Ul>
<Li> sottomenu One </ li>
<Li> sottomenu Due </ li>
<Li> sottomenu Tre </ li>
</ Ul>
</ Li>
</ Ul>
4 Aggiungere i tag "<a>" e "</a>" tra "<li>" e "</ li>" tag accanto a ciascuna voce di sottomenu per convertire l'opzione in un collegamento ipertestuale. Aggiungere l'attributo "href" per ogni tag "<a>", quindi sostituire "URL" con l'indirizzo Web associata per ogni opzione di menu:
<Li> Option One
<Ul>
<Li> <a href="URL"> sottomenu Una </a> </ li>
<Li> <a href="URL"> sottomenu Due </a> </ li>
</ Ul>
</ Li>
<Li> Opzione Due
<Ul>
<Li> <a href="URL"> sottomenu Una </a> </ li>
<Li> <a href="URL"> sottomenu Due </a> </ li>
<Li> <a href="URL"> sottomenu Tre </a> </ li>
</ Ul>
</ Li>
5 Inserire la "<style>" e "</ style>" tag tra i "<head>" e "</ head>" tag nella parte superiore della pagina HTML:
<Head>
<Style>
</ Style>
</ Head>
6 Inserire il seguente codice tra i "<style>" tag per rimuovere il proiettile da davanti a ogni elemento della lista:
li {
list-style-type: none;
}
7 Inserire il seguente codice tra i "<style>" tag per allineare ogni lato opzione del menu a fianco:
ul li {
float: left;
width: 200px;
}
Il codice di cui sopra dovrebbe essere visualizzato sotto "li {list-style-type: none;}".
8 Aggiungere il "visiblity" attribuisce al codice CSS per far funzionare il menu di collegamento in Safari. Inserire i seguenti tra la "<style>" tag, sotto l'elemento "ul li":
ul li ul {
visibility: hidden;
}
ul li: hover {ul
Visibilità: visibile;
display: inline;
}