Menu di navigazione orizzontale composto da una lista <UL> con effetto rollover
Esempio
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>
Codice CSS
#contenitoremenu { width: 920px; display: block; padding: 10px; height: 100px; } #listamenu { display: block; list-style: none; margin: 0px; padding: 0px; } #listamenu li { list-style: none; text-align: left; display: block; float: left; color: #FFF; height: 80px; width: 80px; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 5px; background-color: #036; } #listamenu li a:link, #listamenu li a:visited { margin: 4px; padding: 0px; font-weight: bold; display: block; width: 80px; text-decoration: none; color: #FF6600; height: 80px; border: 1px solid #CCC; } #listamenu li a:hover, #listamenu li a:active { margin: 4px; padding: 0px; font-weight: bold; background-color: #F3F3F3; border: 1px solid #CCC; } #listamenu li#elementoattivo a:link, #listamenu li#elementoattivo a:visited { font-weight: bold; border: 1px solid #F60; color: #FFF; } #listamenu li#elementoattivo a:hover, #listamenu li#elementoattivo a:active { font-weight: bold; border: 1px solid #F60; color: #F60; }