HTML / CSS - Problema di visualizzazione: elemento css non allineato correttamente

Salve a tutti.
Il problema che voglio sottoporVi è relativo al menù orizzontale centrale del sito comunesampe.altervista.org/ (url provvisorio per una PA).
Come potrete notare, il menù orizzontale che compare al passaggio del mouse non è correttamente allineato con quello superiore, ma risulta spostato verso destra di qualche pixel.

Consigli per risolverlo?

Qui il codice css:

/* (NUOVO) MENU' ORIZZONTALE (Hor Item) */

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 100%;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 16px;
	background: url(http://newwpthemes.com/livedemo/wp-content/themes/goBusiness/images/nav-hover.png) repeat-x;
	font-family: Tahoma;
}
ul#topnav li {
	list-style: none;
	float: left;
	margin: 0; padding: 0;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #ffffff;
	text-transform:uppercase;
	font-weight: bold;
	text-decoration: none;
}

ul#topnav li:hover {
	color: #000000;
}

ul#topnav ul {
	list-style-type:none;
	padding: 5px 0;
	position: absolute;
	left:0px;
	top:30px;
	display: none; /*--Hide by default--*/
	width: 100%;
	font-size: 14px;
	background: #0557af;
	color: #fff;
	z-index:999;
}
ul#topnav :hover ul { display: block; } /*--Show subnav on hover--*/
ul#topnav ul a {
	color: #ffffff;
	display: inline;
	text-transform:none;
}

Qui il richiamo dal file 'header.php' (premetto che uso wordpress)

			<div class="span-24">	
<?php wp_nav_menu(array('theme_location' => 'menu_2',
	'menu_id' => 'topnav',
	'container_class' => 'topnav'));  ?>
			</div>

<script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : 'none'}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});

});
</script>

su l'elemento ul#topnav ul prova a impostare la proprietà left con un valore negativo..
tipo left : -10px

| Home | Chi ci governa | ecc.. | .. |

visto che il sub menu scende a partire dal secondo elemento(tag li) (Chi ci governa) devi tenere conto del padding fra "home" e "chi ci gov" che è doppio rispetto allo spazio che c'è tra il padding sinistro di Home credo sia qusto il motivo