Probleme lien actif (image) menu vertical

Bonjour,

voila des heures que je tente de mettre une image en background pour le lien actif, mais l'image est toute décalée.

Voila mon html

				<div id="ribbon-navigation">
				    <ul class="top-level">
				        <li><a href="#" class="selected">Présentation</a></li>
				        <li><a href="#">En image</a></li>
				        <li><a href="#">Le mot du proviseur</a></li>
				        <li><a href="#">Administration</a></li>
				        <li><a href="#">Vie des élèves</a></li>
				        <li><a href="#">Les instances</a></li>
				    </ul>
				</div>

et voila pur mon css

#ribbon-navigation { width:200px; margin-left: 0px; float: left; position: fixed;}
#ribbon-navigation ul { width:200px; background-color: #111111;}
#ribbon-navigation li { list-style: none; padding:10px 0 0px 30px;margin-left:-16px;} 
#ribbon-navigation a {  font: 0.75em 'Nunito',Arial,sans-serif ;
	  font-weight: 300 ;margin-left: 5px;  display:block; color: white;  text-decoration:none; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid grey;}
#ribbon-navigation li:hover {margin-left: -30px; background:url('bandeau.png') top left no-repeat; color: #000;}

.selected { background:url('bandeau.png') top left no-repeat; color: #000;}

Help! Please