I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

/*holder for the menu */
div.navigation {
margin-left:30px;
padding-top:10px;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
display: block;
padding: 0px 20px 0px 10px;
display: inline;
height:2.19em;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

.navigation ul li a:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
}

I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync.

I tried this altrnative code, to no avail:

.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

div.navigation {
margin-left:30px;
padding-top:10px;
height:2.19em;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
padding: 0px 20px 0px 10px;
display: block;
float:left;
height:2.19em;
}

.navigation ul li:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
background-repeat:no-repeat;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
display: inline;
}

Any ideas or pointers gratefully received!