Menu navigatore orizzontale 9

Precedente Successiva Torna all'elenco Chiudi

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;
}
               

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie