/* Centralizando o exemplo quer entender? acesse o topico: "Como centralizar uma div com css em modos relative, static, absolute, fixed." */
#divCentralizada
{
position:absolute;
left:50%;
top:50%;
height:50px;
width:212px;
margin-left: -106px;
margin-top: -25px;
}
 
 
 
/* classe responsavel por adcionar imagem  na lista */
.classeSprite
{
/* adciona imagem */
background-image:url(imagem.jpg);
/* controla repetição */
background-repeat:no-repeat;
/* tamanho do botão em altura (não é o tamanho da imagem)*/
height:50px;
/* tamanho do botão em largura */
width:212px;
/* adciona cursor "mãozinha" */
cursor:pointer;
}
 
 
/* aciona o comando de posição do background (passou o mouse posiciona a imagem ao retirar por padrão ela volta ao status inicial)*/
li:hover
{
/* posiciona o background para cima -50 */
background-position:0px -50px;
}
 
 
/* remaove o espaço e o marcador da lista */
ul
{
padding:0px;
list-style:none;
}
 
body 
{
background-color: #CCC;
margin: 0px 0px 0px 0px;
}