Proviamo a creare un semplice menu, una barra di navigazione

Proviamo a creare un semplice menu, una barra di navigazione, inserendo nel body di una
pagina html il seguente codice:
<div>
<a href=“home.htm”>
<a href=“storia.htm”>
<a href=“prodotti.htm”>
<a href=“download.htm”>
<a href=“contatti.htm”>
</div>
Homepage
Chi siamo
Prodotti
Download
Contatti
</a>
</a>
</a>
</a>
</a>
Provare ad aggiungere l'attributo title=“breve descrizione” al tag a. Si crea così
un tooltip, ossia un riquadro descrittivo che compare al passaggio del mouse sopra il link.
Ad esempio:
<a href=“home.htm” title=“torna alla home page”> Homepage </a>
Definiamo separatamente in un foglio di stile le caratteristiche della barra di navigazione:
div {
background: navy;
}
a:link, a:visited {
color: silver;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: navy;
background: silver;
}
La pseudo-classe :hover fa riferimento al momento in cui il cursore si trova sopra al link
(senza aver fatto clic).
La pseudo-classe :link fa riferimento al link (non ancora visitato).
La pseudo-classe :visited fa riferimento al link già visitato.
Notare l'aggiunta della propritetà text-decoration
Perchè si rende necessario aggiungere tale proprietà?
text-decoration: underline;
possibili valori underline (sottolineato), overline (barrato) o none (nessuna)