Menu di navigazione composto da una lista <UL> con effetto rollover
Esempio
Elementi grafici di Fireworks
Codice Html
<div id="contenitoretabs">
<ul id="listatabs">
<li id="tabcorrente"><a href="#"><div class="tabCentratoVerticalmente">2013</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2012</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2011</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2010</div></a></li>
</ul>
</div>
Codice CSS
#contenitoretabs { height: 40px; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #F3F3F3; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 8px; } #listatabs { margin: 0px; padding: 0px; } #listatabs ul, #listatabs li { padding: 0px; display: inline; list-style-type: none; margin: 0px; } #listatabs a:link, #listatabs a:visited { float: left; font-weight: bold; text-decoration: none; color: #999; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 180px; text-align: center; text-transform: uppercase; height: 50px; display: block; vertical-align: middle; background-image: url(Immagini/tab_off.png); background-repeat: no-repeat; background-position: center 0px; padding: 0px; } #listatabs a:hover, #listatabs a:active { font-weight: bold; text-decoration: none; color: #000; width: 190px; height: 50px; text-align: center; vertical-align: middle; display: block; padding: 0px; background-image: url(Immagini/tab_on.png); background-repeat: no-repeat; background-position: center 0px; margin: 0px; } #listatabs li#tabcorrente a:link, #listatabs li#tabcorrente a:visited { font-weight: bold; text-decoration: none; color: #000; padding: 0px; width: 190px; text-align: center; height: 50px; vertical-align: middle; display: block; background-image: url(Immagini/tab_on.png); background-repeat: no-repeat; background-position: center 0px; margin: 0px; } #listatabs li#tabcorrente a:hover, #listatabs li#tabcorrente a:active { font-weight: bold; text-decoration: none; color: #000; padding: 0px; width: 190px; height: 50px; text-align: center; vertical-align: middle; display: block; margin: 0px; background-image: url(Immagini/tab_on.png); background-repeat: no-repeat; background-position: center 0px; } .tabCentratoVerticalmente { width: 170px; margin-top: 20px; text-align: center; vertical-align: middle; display: block; margin-right: auto; margin-left: auto; }