Menu di navigazione orizzontale composto da una lista <UL> con effetto rollover
Esempio
Elementi grafici di Fireworks
Codice Html
<div id="contenitoremenu">
<ul id="listamenu">
<li id="elementoattivo"><a href="#">Home</a></li>
<li><a href="#">Chi sono</a></li>
<li><a href="#">Portfolio lavori</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<div id="resetlistamenu"></div>
Codice CSS
#contenitoremenu { margin: 0px; padding: 0px; } #contenitoremenu ul { margin: 0px; padding: 0px; list-style-type: none; text-align: left; } #contenitoremenu ul li { float: left; height: 110px; width: 100px; padding-right: 30px; } #listamenu li a:link, #listamenu li a:visited { text-decoration: none; font-size: 14px; float: left; margin: 0px; height: 110px; width: 90px; padding-top: 25px; padding-right: 25px; padding-bottom: 0px; padding-left: 10px; color: #000; font-weight: bold; background-image: url(Immagini/cartella_off.png); background-repeat: no-repeat; background-position: 0px 0px; } #listamenu li a:hover, #listamenu li a:active { color: #F30; font-weight: bold; background-image: url(Immagini/cartella_on.png); background-repeat: no-repeat; background-position: 0px 0px; } #listamenu li#elementoattivo a:link, #listamenu li#elementoattivo a:visited { color: #F30; font-weight: bold; background-image: url(Immagini/cartella_on.png); background-repeat: no-repeat; background-position: 0px 0px; } #listamenu li#elementoattivo a:hover, #listamenu li#elementoattivo a:active { color: #F30; font-weight: bold; background-image: url(Immagini/cartella_on.png); background-repeat: no-repeat; background-position: 0px 0px; } #resetlistamenu { clear: both; }