Anche qui ci sono due modi. In entrambi i casi, sarà necessario attribuire nell’HTML classi o, ancora meglio id,
ai singoli elementi della lista. Ecco l’HTML essenziale per un menu di navigazione realizzato con una
lista non ordinata:
<ul id=”navigation”>
<li id=”home”><a href=”#”>Home Page</a></li>
<li id=”prodotti”><a href=”#”>Prodotti</a></li>
<li id=”contatti”><a href=”#”>Contatti</a></li>
</ul>
Il primo metodo è usare la proprietà list-style-image, che si applica anche ai li oltre che alle liste:
li#home{list-style-image: url(casetta.gif)}
li#prodotti{list-style-image: url(prodotti.gif)}
li#home{list-style-image: url(email.gif)}
Il secondo metodo è usare il background, ecco il CSS di esempio:
ul#navigation{list-style-type: none;margin: 0;padding: 0}
ul#navigation li{padding-left: 10px}
li#home{background: url(casetta.gif) no-repeat left center}
li#prodotti{background: url(prodotti.gif) no-repeat left center}
li#contatti{background: url(email.gif) no-repeat left center}