Menu w CSS

[Mclain]

Trochę ukradłem, trochę samemu doczytałem, ale stanąłem w jednym miejscu. Mianowicie chciałbym zrobić sobie takie menu statyczne do stronki (uczę się css), które po najechaniu na przycisk zmieniałoby się (wskakiwałby inny obrazek), a po kliknięciu i przeniesieniu do strony, ten podświetlany obrazek by zostawał na danej podstronie.

Pewnie zamieszałem, ale w kodzie wygląda to tak:

header {
width: 1010px;
margin: 0 auto;
line-height: 10px;
}
#gora ul li  {
display: inline-block;
width: 223px;
height: 74px;
background-image: url(graf/button.png);
margin: 0 0.6%;
position: relative;
}
#gora ul li.active, #gora ul li:hover  {
background-image: url(graf/button.png);
filter: alpha(opacity=50);
}
#gora ul li img {
margin: 4px 11px;
position: absolute;
opacity: .3;
}
#gora ul li p {
margin: 5px 0 0 57px;
position: absolute;
text-transform: uppercase;
line-height: 22px;
font-size: 11px;
width:180px;
}
#gora ul li.active  p, #gora ul li.active  a, #gora ul li:hover  a , #gora ul li:hover  p {
background-image: url(graf/buttonaktywny.png);
}
#gora ul li p span {
display: block;
font-size: 16px;
}

obecnie po tym kodzie wygląda to tak, że podświetlanie (z active) wyskakuje gdzieś na boku. Jak to kurcze zrobić, żeby się pokrywało na równi z obecnymi przyciskami.

Proszę o pomoc

[kayman]

li.active -> li:active

[Xenobi]

Na przyszłość warto użyc validatora CSS, on wylapuje takie niuanse w składni