Problème avec hover.

Bonjour,

J'ai un code pour un menu. Voici le code CSS de ce menu :

#head
{
width: 100%;
height: 100px;
background-image: url('\Sans titre.jpg');
background-repeat:no-repeat;
}

/* Menu 1
----------------------------------------------- */

ul ul {
display: none;
position: absolute;
left: 140px;
top: -1px;
margin:0px;
padding: 0px;
}

li {
list-style-type: none;
position: relative;
width: 140px;
height: 30px;
background-image: url('\Sans titre.gif');
background-repeat: no-repeat;
padding: 2px;
margin: 0px
}
li:hover {
background-image: url('\Bouton hover.gif');
}
li:hover ul.niveau2, li li:hover ul.niveau3 {
display: block
}
li.plus {
background-position:right;
background-repeat: no-repeat;
}

Mais le hover ne passe pas. Lorsque je met le curseur sur le bouton vert (background : Sans titre.gif), c'est censé faire apparaître une autre image (Background: Bouton Hover.gif). Au lieu de cela, le bouton vert disparaît et rien d'autres n'apparaît à la place.

J'ai bien vérifié mes dossiers et fichiers. Lorsque l'on met une adresse url à la place Bouton Hover.gif, ça fonctionne. Et le bouton vert du départ est remplacé par l'image.

Quel est la solution ?

Merci bonne soirée à tous.

Configuration: Windows XP
Safari 530.5