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

[mortus]

Nadaj elementom li styl display: inline-block;. Atrybut background potrzebuje nieco więcej parametrów. Do podmiany obrazka użyj background-image.

[webfreak]

Najpierw zdefiniuj

[HTML] pobierz, plaintext 
 
/* zdefiniuj wysokosc szerokosc i float  */
#topnav ul li a:link
{
    backgroud:url('sciezka/do/obrazka.png'); /* nie koniecznie obrazek ale zdefiniuj wymiary bo takie przyjmie hoover */
    width:50px;
    height:50px;
    float:left;
}
 
/* zdefiniuj tylko obrazek tla  */
#topnav ul li a:hover
{
    backgroud:url('sciezka/do/obrazka.png');
}
 
[HTML] pobierz, plaintext