[css][xhtml]Zmian <li> po najechaniu na pozycję (hover) Opcje

[babejsza]

Witam,

napotkałem problem w trakcie robienia bocznego menu. Mianowicie chodzi mi o to, żeby normalnie menu wyświetlało się bez obrazka z lewej strony. Ma on się pojawić dopiero po najechaniu na dane pole menu.

Obrazek jest dość duży (38x38px) i jak do tej pory wygląda to tak, że po najechaniu na daną pozycję wszystko się paskudnie rozsuwa. Chciałbym, żeby tekst był zawsze w jednym miejscu, a tylko dodawał się obrazek.

To z czym mam problem jak na razie wygląda tak:

[HTML] pobierz, plaintext 
<div id="left">
  <ul>
    <li><a href="#">pozycja 1</a></li>
    <li><a href="#">pozycja 2</a></li>
    <li><a href="#">pozycja 3</a></li>
  </ul>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#left ul{
	margin: 0 0 0 38px; padding: 0;
}
#left li{
	padding: 0; margin: 12px 0 12px 0;
	list-style-type: none;
}
#left li:hover{
	list-style-image: url(images/kostka.gif);
}
[HTML] pobierz, plaintext 

Będę bardzo wdzięczny za pomoc .