Menu di navigazione composto da una lista <UL> con effetto rollover
Esempio
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>
<li><a href="#"><div class="tabCentratoVerticalmente">2009</div></a></li>
</ul>
</div>
Codice CSS
#contenitoretabs { height: 40px; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #CCC; 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: 8px; margin-bottom: 0px; margin-left: 0px; width: 100px; text-align: center; text-transform: uppercase; height: 37px; display: block; vertical-align: middle; background-color: #F3F3F3; border-bottom-width: 3px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #CCC; padding-top: 0px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } #listatabs a:hover, #listatabs a:active { font-weight: bold; text-decoration: none; color: #000; margin-top: -3px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; width: 100px; height: 37px; text-align: center; vertical-align: middle; display: block; background-color: #FFF; border-bottom-width: 4px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #FFF; border-top-width: 3px; border-right-width: 3px; border-left-width: 3px; border-top-color: #F30; border-right-color: #F30; border-left-color: #F30; padding: 0px; } #listatabs li#tabcorrente a:link, #listatabs li#tabcorrente a:visited { font-weight: bold; text-decoration: none; color: #000; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 0px; width: 100px; text-align: center; height: 37px; vertical-align: middle; display: block; border-bottom-width: 4px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #FFF; background-color: #FFF; border-top-width: 3px; border-right-width: 3px; border-left-width: 3px; border-top-color: #CCC; border-right-color: #CCC; border-left-color: #CCC; } #listatabs li#tabcorrente a:hover, #listatabs li#tabcorrente a:active { font-weight: bold; text-decoration: none; color: #000; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 0px; width: 100px; height: 37px; text-align: center; vertical-align: middle; display: block; border-bottom-width: 4px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #FFF; border-top-width: 3px; border-right-width: 3px; border-left-width: 3px; border-top-color: #F30; border-right-color: #F30; border-left-color: #F30; } .tabCentratoVerticalmente { width: 100px; margin-top: 12px; text-align: center; vertical-align: middle; display: block; }