div with background hover

[Daz]

I have a div which holds my nav bar, the css for which looks like this

#topnav{
background-image: url(../pics/topnav_bg.gif);
width: 100%;
height: 20px;
}

I want to place my links right aligned in it and have a hover effect which uses a background image called pics/topnav_bg_hover.gif.

Can anyone tell me how to do this?

Thanks

[Daz]

Actually I've nearly sussed it but my problem lies with the hover effect. I've specified width 50px, if I don't the whole bar changes or if I remove display:block; then the hover image just appears behind the text and not the full 20px height.

Here's the css, what can I do to avoid specifying 50px?

div#toplink{
background-image: url(../pics/topnav_bg.gif);
height: 20px;
font-family: Verdana, Helvetica, Arial;
font-size: x-small;
color: #808080;
text-align: right;
}
div#toplink a:link{
background-image: url(../pics/topnav_bg.gif);
height: 20px;
font-family: Verdana, Helvetica, Arial;
font-size: x-small;
color: #808080;
text-align: right;
}
div#toplink a:hover{
display: block;
width: 50px;
background-image: url(../pics/topnav_bg_hover.gif);
height: 20px;
font-family: Verdana, Helvetica, Arial;
font-size: x-small;
color: #FFFFFF;
text-align: right;
}

[Incubator]

i´m sorry for bumping in here, but would you mind if I ask you a small question?
how do you make your navbar dissappear again when the onmouseout even occurs? i´ve been figuring that out for a long time now, but couldnt find this in any code
for your question you might try this:

in the element where your link is displayed you could add an onmouseover event and make a new #navover css style

and then write:

onmouseover="this.style='#navover';"

[Daz]

There's no need for javascript if you write your css correctly.

If you look at my css above, it states the div has a background image (which is only 1px wide btw) and I call in a different one only when hovering. I'm trying to avoid the use of js anywhere on this redesign.