#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) */
}