Billede i stedet for en list-style?

et hurtigt søg på google gav mig dette resultat:
http://css.maxdesign.com.au/listamatic/vertical05.htm

du kan så også bruge "ul {list-style-image:url(../images/bullet.gif);}", men det vil kun virke på alle browsere hvis du bruger et billede på 10x10 px uanset størrelse på dit font.

Her er et uddrag af min menukode:
<div id="menuleft">
<ul>
<li class="left-level-1-no">
</li>
<li class="left-level-1-act">
<a title="Jeg vil igang" href="jeg-vil-igang.html">Jeg vil igang</a>
<ul>
<li class="left-level-2-no">
</li>
<li class="left-level-2-act">
<a title="Løbesko" href="jeg-vil-igang/loebesko.html">Løbesko</a>
</li>
<li class="left-level-2-no">
</li>
<li class="left-level-2-no">
</li>
<li class="left-level-2-no">
</li>
<li class="left-level-2-no">
</li>
</ul>
</li>
</ul>
</div>

Og det er så på min nr 2 ul jeg gerne skulle have et billede frem foran...
Se det eks. her: http://sport-guide.nekat.pil.dk/jeg-vil-igang/loebesko.html

level 2 menupunkter skal gerne have det bindestregs-billede foran...

Jeg gør det på en lidt anden måde med specielle tegn til li's - baggrundsbilleder. En utestet kode ville være noget lignende:

<style type="text/css">
ul { list-style: none; }
ul li { background: url(dot1.gif) no-repeat left center; }
ul ul li { background: url(dot2.gif) no-repeat left center; }
</style>

:-)

Og så bruge padding til at skubbe teksten væk fra baggrundsbilledet. Eks:

<style type="text/css">
ul { list-style: none; }
ul li { background: url(dot1.gif) no-repeat left center; padding: 0 0 0 20px; }
ul ul li { background: url(dot2.gif) no-repeat left center; padding: 0 0 0 20px; }
</style>

Fandt selv ud af det, men vil gerne dele point med dig, for din hjælp, så smid lige et svar :-)

Så kommer der et svar her :-)

Har fået løst problemet, så til dem der gerne vil have lidt point, smid et svar :-)