Mettre du texte sur une image [xHtml/Css]

Bonjour,

J'ai fais une barre de navigation avec Photoshop, j'aimerai que le texte sois sur la barre qui est une image.
Le problème c'est que le texte est en dessous l'image est pas sur. La taille de la barre est de 700x50 si ça peut aider...


Voici le code xHtml :

<!-- Barre de naviguation -->

<div id="barre_naviguation">
<ul>
<img src="images/naviguation.jpg" alt="Barre de naviguation" title="" />
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

Css :

#barre_naviguation li
{
display: inline;
list-style-type: none;
padding-right: 20px;
list-style-image: url("images/icones/puce.jpg");
}

Merci de votre aide !