Menu orizzontale con voci differenziate

**furly** · 01-09-2014, 14:44

Buongiorno.
Ho costruito un menu orizzontale molto semplice con 8 voci.
Al passaggio del mouse lo sfondo cambia colore.
Volevo però che le due ultime voci (Item-7 e Item-8) abbiano un loro colore principale e un loro colore al mouse-hover. Avevo pensato di creare due menu nel css con quello che mi serve, ma non riesco ad affiancarli sulla larghezza del body.
Comunque se è possibile fare tutto in un menu, magari.
Allego html di prova.
Grazie.

**carlomarangoni** · 01-09-2014, 16:14

codice:

<html>

<style media="screen" type="text/css">
body {margin:0 auto; font-family: sans-serif; font-size: 13pt; line-height: 14pt; color:black;}
#menu {width: 100%; font-size: 16px; text-align: left; color: #53B232; margin: 0 auto; padding: 0;}
#menu li {display: inline; margin: 0 20px 0 0;}
#menu li a {display: inline-block; color: #4a3c39; text-decoration: none;}
#menu li a:hover {color: #000; text-decoration: none; background : #ffe4a3;}
#menu .item78 a {background:#22FF00;}
#menu .item78 a:hover {color:#FF0004; background: #9CFFFD}
</style>

<body>

<div id="menu">
<ul>
<li><a href="#">Item-1</a></li>
<li><a href="#">Item-2</a></li>
<li><a href="#">Item-3</a></li>
<li><a href="#">Item-4</a></li>
<li><a href="#">Item-5</a></li>
<li><a href="#">Item-6</a></li>
<li class="item78"><a href="#">Item-7</a></li>
<li class="item78"><a href="#">Item-8</a></li>
</ul>
</div>

</body>
</html>

**furly** · 01-09-2014, 17:11

Super!
Funziona benissimo.
Grazie molte.

Discussione: Menu orizzontale con voci differenziate

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Menu orizzontale con voci differenziate

Permessi di invio