[CSS3] Problème avec la propriété z-index

Bonjour, j'ai utilisé la propriété z-index pour un logo facebook qui est caché derrière le menu et quand on passe la souris dessus, le curseur change en pointer et le logo monte.
Voici mon code html :

<div class="facebook">

<img src="img/facebook.png"/>

</div>

Voici le css :

.facebook{

margin-left:900px;
padding:10px;
position:relative;
z-index:-1;
}

.facebook:hover{

margin-top:-15px;
cursor:pointer;

}

Mon problème :

Tout va bien sauf que quand je passe la souris dessus, il ne se passe rien !

Merci à tous de me répondre :)