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 ?

Tę strzałeczkę załatwić można w ten sposób:



Co do podmiany obrazka, to kod byłby następujący:

Wiesz co owszem ten punktator jest juz na srodku, ale jest jedno ale .......

Punktator pojawia się na srodku obrazka a nie przed nim.

a jeśli chodzi o drugie to da się li:hover

A jesli chodzi o to pierwsze? Może mi ktoś coś podpowiedzieć?

A mam pytanie da sie jakos zrobic aby zawartosc znacznika <li> zaczynala sie od razu przy krawedzi, bo standardowo lista wyglada tak:

Bibliografia:
<ul>
<li>cos</li>
</ul>

otrzymamy:

Bibliografia:
&nbsp;&nbsp;&nbsp;&nbsp;cos

A chcialbym aby wygladalo to tak:

Bibliografia:
cos


Chodzi mi o to aby lista wyliczala przy lewej krawedzi div'a baz odstepu od niego.

[HTML] pobierz, plaintext 
<div style="background-color:red;border:black dotted 1px;">
<ul>
<li>aksksjsjsjs</li>
<li>aksksjsjsjs</li>
</ul>
 
 
</div>
[HTML] pobierz, plaintext