menu orizzontale: rollover

[Starky]

Ciao a tutti!

Sto cercando di realizzare un menu orizzontale al 100% di larghezza con un semplice effetto di rollover. Il problema è che quando vado sopra con il mouse cambia solo il background-color sotto il testo mentre io vorrei che l'effetto fosse applicato a tutta la cella.
(allego un immagine per far capire meglio il problema)

html

<table cellpadding="0" cellspacing="3" class="menu_top" width="100%">
<tr>
<td>Hotel Continental</td>
<td>Hotel Garda</td>
<td>Hotel Savoy Palace</td>
<td>Hotel Splendid</td>
<td class="localita"><a href="#">Localit&agrave;</td>
</tr>
<tr><td colspan="5" class="hr_sotto"></td></tr>
</table>

CSS

.menu_top {     /*menu di navigazione orizzontale in alto*/
	padding: 0px;
	margin:0;
	margin-bottom:16px;
	width:100%;
}

.menu_top .hr_sotto{
	margin:0px;
	padding:0px;
	height:10px;
	background-color:#0E68AF;
}

.menu_top TD {
	width:20%;
	text-align:center;
    height:24px;
    padding:0px!imoprtant;
    margin:0px!important;
	font-weight:bold;
	border: 1px solid #00448B;
	/*display:block;*/
	background-color:#FFFFFF;
}

.menu_top .localita {
	border: 1px solid #56A13F;
}

.menu_top TD A, .menu_top A:link, .menu_top A:visited {
	color: #000000;
	text-decoration:none;
	display:block;
}

.menu_top TD A:hover {
	background-color: #0E68AF;
	color:#FFFFFF;
	display:block;
}

.menu_top A:active {
	background-color: #0E68AF;
	color:#FFFFFF;
	font-weight: bold;
}

Spero che mi possiate aiutare!

Grazie

Sara