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; border: 3px solid #CCC; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; width: 100px; text-align: left; text-transform: uppercase; height: 37px; padding: 0px; display: block; vertical-align: middle; background-color: #F3F3F3; -webkit-border-top-right-radius: 40px; -moz-border-radius-topright: 40px; border-top-right-radius: 40px; } #listatabs a:hover, #listatabs 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: left; vertical-align: middle; display: block; background-color: #FFF; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 4px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #F30; border-right-color: #F30; border-bottom-color: #FFF; border-left-color: #F30; } #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: left; height: 37px; vertical-align: middle; display: block; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 4px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #F30; border-right-color: #F30; border-bottom-color: #FFF; border-left-color: #F30; background-color: #FFF; } #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: left; vertical-align: middle; display: block; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 4px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #F30; border-right-color: #F30; border-bottom-color: #FFF; border-left-color: #F30; } .tabCentratoVerticalmente { width: 92px; margin-top: 12px; text-align: left; vertical-align: middle; display: block; margin-left: 8px; }