Uzyskanie efektu hover

[gris]

Mam problem ze stylem hover, który mi nie działa. Mam menu poziome i chcę na nim uzyskać ten efekt. Niestety przy użyciu obrazka nie działa, natomiast jak używam samego koloru to jest ok. Zauważyłem też, że dopóki nie dopiszę float:left do #topnav ul li (czyli dopóki menu jest pionowe) to hover ładnie działa.

Kod:

#topnav{ background: #0E192D url(../images/menu.png) top repeat-x;
height: 54px;
width:980px;
margin: 0px;
padding:0px;
font-weight: bold;
}

#topnav ul {
margin: 0px 0px 0px 11px;
padding: 0;
width: auto;
float: left;
list-style-type:none;
}

#topnav ul li {
float: left;
margin: 0;
padding: 0;
height: 54px;  
position:relative;
}

#topnav ul li a:hover {
background: url(../images/hover.png);
}

[Kartofelek]

bardzo zły kod. Dlatego nie działa. LI ma float, a wymiarów nie podanych. jedno bez drugiego jest bez sensu, chyba że to inny typ (inline-block). Linki są domyslnie inline więc background dla nich będzie bezsensownym. Trzeba by je zmienić na blokowe itp itd itp itd
Właściwie 90% kodu do wymiany.

Ogólnie przejrzyj jakiś tutorial o css menu i zwróć uwagę na typy renderowania.