Ho strutturaro in questo modo il menu dei link di una pagina:

HTML
codice:
<ul class="navbar">
		[*]Il nostro Bed&#038;Breakfast
		[*]Il paese
		[*]La storia
		[*]Le tradizioni
		[*]Indirizzi utili
		[*]Scrivici
	[/list]
CSS
[code]ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 10em; /*sposta in basso*/
left: 3em; /*muove verso destra*/
width: 10em;
}

ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #1A2894;
}

ul.navbar a {
text-decoration: none;
}

a:link {
font-weight: bold;
color: #1A2894;
}

a:visited {
font-weight: bold;
color: #1A2894;
}[code]

Vorrei un effetto hover che, al passaggio mouse, invertisse
sfondo bianco e testo blu. Il codice:

[code]a:hover {
font-weight: bold;
color: #FFFFFF;
background: #1A2894;
}[code]

non è quello che desidero, perché fa diventare blu
solo lo sfondo prossimo alle parole, e non l'intera casella.
Mi date uno spunto per ottenere questo risultato?

Grazie
M.