Uzyskanie efektu hover Opcje

[monio]

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);
}