Menu di navigazione orizzontale composto da una lista <UL> con effetto rollover
Esempio
Codice Html
<div id="contenitoremenu">
<div class="listamenu">
<ul>
<li class="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>
</div>
Codice CSS
#contenitoremenu { padding: 0px; margin: 0px; } .listamenu { width:920px; overflow:hidden; position:relative; line-height:18px; height: 35px; background-color: #333; } .listamenu ul { margin:0px; display:inline; float:left; padding: 6px; width: 920px; } .listamenu ul li { display:inline; float:left; /* LTR */ font-size:12px; line-height:18px; list-style-type:none; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; padding: 0px; } .listamenu ul li a { background:transparent; color:#ccc; display:block; font-size:12px; line-height: 24px; font-weight:normal; text-decoration:none; text-shadow: 0 1px 1px rgba(0,0,0,.5); width:auto; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } .listamenu ul li a:focus, .listamenu ul li a:hover, .listamenu ul li a:active { color: #fff; background:#666; background: rgba(255,255,255,.25); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-decoration:none; outline: 0 none; } .listamenu ul li.elementoattivo { background:#666; background: rgba(255,255,255,.3); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #fff; } .listamenu ul li.elementoattivo strong, .listamenu ul li.elementoattivo a:focus, .listamenu ul li.elementoattivo a:hover, .listamenu ul li.elementoattivo a:active { background:transparent; color:#fff; text-decoration:none; }