[HTML][CSS]Wypunktowanie listy i zmiana punktatora Opcje

[gregi1]

Mam taki problem otóż mam coś takiego

Plik index.html

[HTML] pobierz, plaintext 
<div id="menu">
<ul>
<li><img src="menu1.gif /></li>
<li><img src="menu2.gif /></li>
</ul>
</div>
[HTML] pobierz, plaintext 

Plik main.css

[HTML] pobierz, plaintext 
list-style-image: url(images/punkt.gif);
width:175px;
margin-left: 32px;
padding-bottom: 30px;
[HTML] pobierz, plaintext 

I w tej chwili ten "punkt" (strzaleczka) w liscie jest wyrownana do dolnej krawedzi obrazka menu1, menu2 a czy do sie zrobic aby byla do środka obrazka?

Pytanie drugie czy da rade jakoś zrobić i w jaki sposób, aby w momencie najechania na dane menu czyli obrazek zmienił się przy nim ten "punktator" w liscie na np punkt_blue.gif? Cos takiego jak można zrobić z a: link, hover ?