#header { width: 452px; /* =larghezza immagine */ height: 37px; /* =altezza immagine */ margin: 5px auto; /* cambiare il valore 5 per impostare i pixel del margine superiore e inferiore della barra */ } #header ul, #header li { margin:0; padding:0; } #header ul#menu li { display: inline; overflow: hidden; height:37px; /* =l' altezza dell' immagine */ } #header { background: url(menu_03.png) no-repeat; /* =path immagine di default della barra */ } #header ul#menu li a { float: left; height: 0px; padding-top: 37px; /* =l' altezza dell' immagine */ overflow: hidden; } #menu li a:hover { background: url(menu_06.png) no-repeat; /* =path immagine stato hover della barra */ } #menu li a:active { background: url(menu_08.png) no-repeat; /* =path immagine stato active della barra */ } #menu li a.selected { background: url(menu_10.png) no-repeat; /* =path immagine stato selected della barra */ } li#one a { width:53px; /* =larghezza del bottone1 */ } li#two a { width:164px; /* =larghezza del bottone2 */ } li#three a { width:189px; /* =larghezza del bottone3 */ } li#four a { width:46px; /* =larghezza del bottone4 */ } li#one a:hover,li#one a:active,li#one a.selected { background-position:0px 0px; } li#two a:hover,li#two a:active,li#two a.selected { background-position:-53px 0px; /* settare con la larghezza del bottone1 (53px) */ } li#three a:hover,li#three a:active,li#three a.selected { background-position:-217px 0px; /* = bottone1+ bottone2 (53px+164px) */ } li#four a:hover,li#four a:active,li#four a.selected { background-position:-406px 0px; /* = bottone1+bottone2+bottone3 (53px+164px+189px) */ }