[HTML][CSS] Rodzic wpływający na zachowanie potomka Opcje

[matwiej]

Mam taki oto kod.

[HTML] pobierz, plaintext 
 <nav> 
			<ul>
				<li><div class=kropka></div>Oferta</li>
				<li><div class=kropka></div>Galeria</li>
				<li><div class=kropka></div>Kontakt</li>
			</ul>
		</nav>
[HTML] pobierz, plaintext 

Chciałbym zrobić tak że gdy najadę na element listy <li>. Zaszła reakcja w divie np

[HTML] pobierz, plaintext 
ul li .kropka:hover{
background: red;
}
[HTML] pobierz, plaintext 

Inaczej mówiąc chciałbym aby po najechaniu na napis np oferta kropka zmieniła swój kolor.
Tutaj jeszcze css kropki.

[HTML] pobierz, plaintext 
.kropka{
height:15px;
width:15px;
background: #a8a2a2;
position: absolute;
margin: 10px 0 0 -25px;
}
[HTML] pobierz, plaintext 

Czy istnieje możliwość zrobienia tego za pomocą html/css ?
Czy wyłącznie JS ?

[Arcioch]

Chodzi Ci o coś takiego (IMG:style_emoticons/default/wink.gif)
http://jsfiddle.net/jhWUv/

Odwołujesz się tak (IMG:style_emoticons/default/wink.gif)

[HTML] pobierz, plaintext 
ul li:hover .kropka{
    background: red;
}
[HTML] pobierz, plaintext 

[b4rt3kk]

A czy nie lepiej zamiast do listy wsadzać diva ostylować listę? Albo tak:

[HTML] pobierz, plaintext 
li {
  background: url(kropka.jpg) -25px 10px no-repeat;
}
[HTML] pobierz, plaintext 

Albo ewentualnie tak:

[HTML] pobierz, plaintext 
ul
{
list-style-image: url('kropka.jpg');
}
[HTML] pobierz, plaintext 

[matwiej]

b4rt3kk, twój sposób jest dobry tylko że ja potem używam "transition-property" by uzyskać płynne przejście między kolorami. A używając obrazka nie będę w stanie tego uzyskać ;p