Immagine usata nell'esempio
Stile css utilizzato per l'effetto rollover
.roll ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a.roll {
background: url(bg_rollover.gif) no-repeat left;
display: block;
line-height: 22px;
height: 22px;
padding-left: 50px;
text-decoration: none;
width: 150px !important;
width /**/: 200px;
font-family: Verdana, Geneva;
font-size: 12px;
}
a.roll:link {
color: #731D1D;
background-position: 0px 50%;
}
a.roll:visited {
color: Purple;
}
a.roll:hover {
color: #FFFFFF;
background-position: -200px 50%;
}
Xhtml
<ul class="roll">
<li><a class="roll" href="#">Ischia hotel</a></li>
<li><a class="roll" href="##">Capri hotel</a></li>
<li><a class="roll" href="###">Sorrento hotel</a></li>
<li><a class="roll" href="####">Positano hotel</a></li>
<li><a class="roll" href="#####">Amalfi hotel</a></li>
</ul>
La tecnica usata in questa pagina è di libero utilizzo