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 { padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; height: 55px; } #listamenu { margin: 0px; padding: 0px; } #listamenu ul, #listamenu li { padding: 0px; display: inline; list-style-type: none; margin: 0px; } #listamenu a:link, #listamenu a:visited { float: left; line-height: 36px; font-weight: bold; text-decoration: none; color: #999; border: 3px solid #CCC; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 5px; width: 160px; text-align: center; text-transform: uppercase; -webkit-border-radius: 20px 40px 20px 40px; -moz-border-radius: 20px 40px 20px 40px; -khtml-border-radius: 20px 40px 20px 40px; border-radius: 20px 40px 20px 40px; } #listamenu a:hover, #listamenu a:active { line-height: 36px; font-weight: bold; text-decoration: none; color: #000; border: 3px solid #F30; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 5px; width: 160px; text-align: center; } #listamenu li#elementoattivo a:link, #listamenu li#elementoattivo a:visited { line-height: 36px; font-weight: bold; text-decoration: none; color: #999; border: 3px solid #F30; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 5px; width: 160px; text-align: center; } #listamenu li#elementoattivo a:hover, #listamenu li#elementoattivo a:active { line-height: 36px; font-weight: bold; text-decoration: none; color: #000; border: 3px solid #F30; margin-top: 0px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; padding: 5px; width: 160px; text-align: center; }