Menu di navigazione verticale composto da una lista <UL> con effetto rollover
Esempio
Codice Html
<div id="contenitoremenu">
<ul id="listamenu">
<li id="elementocorrente"><a href="#"><div class="elementoCentratoVerticalmente">Home</div></a></li>
<li><a href="#"><div class="elementoCentratoVerticalmente">Chi sono</div></a></li>
<li><a href="#"><div class="elementoCentratoVerticalmente">Portfolio lavori</div></a></li>
<li><a href="#"><div class="elementoCentratoVerticalmente">Servizi</div></a></li>
<li><a href="#"><div class="elementoCentratoVerticalmente">Contatti</div></a></li>
</ul>
</div>
Codice CSS
#contenitoremenu { width: 200px; } #contenitoremenu ul { margin-left: 0px; padding-left: 0px; list-style-type: none; } #contenitoremenu a { display: block; font-weight: bold; text-decoration: none; color: #999; border: 3px solid #CCC; width: 100px; text-align: center; -moz-border-radius: 100px; -webkit-border-radius: 100px; -khtml-border-radius: 100px; border-radius: 100px; text-transform: uppercase; height: 100px; padding: 0px; display: block; vertical-align: middle; margin: 0px; } #contenitoremenu a:link, #contenitoremenu a:visited { font-weight: bold; text-decoration: none; color: #000; border: 3px solid #F30; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; padding: 0px; width: 100px; height: 100px; text-align: center; vertical-align: middle; display: block; } #contenitoremenu a:hover, #contenitoremenu a:active { font-weight: bold; text-decoration: none; color: #999; border: 3px solid #F30; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; padding: 0px; width: 100px; text-align: center; height: 100px; vertical-align: middle; display: block; } #elementocorrente a:link, #elementocorrente a:visited { font-weight: bold; text-decoration: none; color: #999; border: 3px solid #F30; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; padding: 0px; width: 100px; height: 100px; text-align: center; vertical-align: middle; display: block; } #elementocorrente a:hover, #elementocorrente a:active { font-weight: bold; text-decoration: none; color: #000; border: 3px solid #F30; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; padding: 0px; width: 100px; height: 100px; text-align: center; vertical-align: middle; display: block; } .elementoCentratoVerticalmente { width: 100px; margin-top: 42px; text-align: center; vertical-align: middle; display: block; }