Horizontal navigation menu consists of a list <UL> with rollover effect
Example
Code 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>
Code CSS
#contenitoremenu { background-color: #F3F3F3; padding-top: 5px; } #listamenu { margin: 0; padding: 0 0 20px 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999; } #listamenu ul, #listamenu li { margin: 0; padding: 0; display: inline; list-style-type: none; } #listamenu a:link, #listamenu a:visited { float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #999; } #listamenu li#elementoattivo a:link, #listamenu li#elementoattivo a:visited, #listamenu li#elementoattivo a:hover { padding-bottom: 2px; background: transparent; color: #000; border-bottom-width: 8px; border-bottom-style: solid; border-bottom-color: #F30; } #listamenu a:hover, #listamenu a:active { padding-bottom: 2px; background: transparent; color: #000; border-bottom-width: 8px; border-bottom-style: solid; border-bottom-color: #F30; }