Dos problemillas con menú desplegable

[porta3]

Hola a todos!!! hace unos días he terminado la página web de un Ayuntamiento, la he diseñado en Wordpress y es esta:
www.banyeresdelpenedes.cat

Tengo dos pequeños problemillas con el menú superior; tal y como preguntaba éste usuario (http://www.forosdelweb.com/f53/menu-mantener-efecto-padre-mientras-visualiza-hijo-948263/), me ocurre el mismo problema, pero he probado los consejos indicados en ése mensaje y no he podido arreglarlo.

El segundo problema creo que es una tonteria, pero no logro dar con ella; resulta que si situáis el cursor encima de alguna opción que despliegue los subapartados, hay entre la opción padre y el desplegable un píxel de separación que hace que a veces al ir a buscar los subapartados se cierre el menú.

No sé si me podríais ayudar...incluyo el código del menu.css aquí, a ver si me podríais ayudar con los dos problemas..muchísimas gracias

Código HTML:

.nav {
	background: #333333;
	width: 916px;
	height: 32px;
	color: #cdcdcd;
	padding: 0px 0px 0px 0px;
	margin: 10px auto 10px;
	overflow: hidden;
	float: left;
	border-radius: 0.5em 0.5em 0em 0em;
	}
	
.nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
.nav li {
    float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
.nav li a, 
.nav li a:link, 
.nav li a:visited {
	color: #ffffff;
	display: block;
    font-weight: bold;
	font-size: 14px;
    text-decoration: none;
    margin: 0px 15px 0px 0px;
	padding: 9px 15px 9px 15px;
	}

.nav li a:hover, 
.nav li a:active {
	background: #096595;
	color: #ffffff;
	display: block;
    font-weight: bold;
	font-size: 14px;
    text-decoration: none;
    margin: 0px 15px 0px 0px;
	padding: 9px 15px 9px 15px;
	border-radius: 0.5em 0.5em 0em 0em;
	}

.nav li li a, 
.nav li li a:link, 
.nav li li a:visited {
	background: #096595;
    color: #ffffff !important;
	display: block;
	width: 180px;
	float: none;
	font-size: 11px;
	text-transform: none;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
	border-radius: 0em;
	}
	
.nav li li a:hover, 
.nav li li a:active {
	background: #0D8ED1;
	color: #ffffff;
	display: block;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
	}
	
.nav li li li a, 
.nav li li li a:link, 
.nav li li li a:visited {
	background: #dedede;
    color: #030303 !important;
	width: 150px;
	float: none;
	text-transform: none;
	margin: 0px 0px 0px 0px;
	padding: 3px 10px 3px 10px;
	text-decoration: none;
	}
	
.nav li li li a:hover, 
.nav li li li a:active {
	color: #030303;
	padding: 3px 10px 3px 10px;
	text-decoration: underline;
	}
	
.nav li li li li a, 
.nav li li li li a:link, 
.nav li li li li a:visited {
	background: #cecece;
    color: #030303 !important;
	width: 150px;
	float: none;
	text-transform: none;
	margin: 0px 0px 0px 0px;
	padding: 4px 10px 4px 10px;
	text-decoration: none;
	}
	
.nav li li li li a:hover, 
.nav li li li li a:active {
	color: #030303;
	padding: 4px 10px 4px 10px;
	text-decoration: underline;
	}
	
.nav li li li li li a, 
.nav li li li li li a:link, 
.nav li li li li li a:visited {
	background: #bebebe;
    color: #030303 !important;
	width: 150px;
	float: none;
	text-transform: none;
	margin: 0px 0px 0px 0px;
	padding: 4px 10px 4px 10px;
	text-decoration: none;
	}
	
.nav li li li li li a:hover, 
.nav li li li li li a:active {
	color: #030303;
	padding: 4px 10px 4px 10px;
	text-decoration: underline;
	}

.nav li {
	float: left;
	padding: 0px;
	}

.nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

.nav li li { 
	}

.nav li ul a {
	width: 171px;
	}

.nav li ul a:hover, 
.nav li ul a:active { 
	}

.nav li ul ul {
	width: 171px;
	margin: -10px 0 0 147px;
	}

.nav li:hover ul ul, 
.nav li:hover ul ul ul, 
.nav li.sfhover ul ul, 
.nav li.sfhover ul ul ul {
	left: -999em;
	}

.nav li:hover ul, 
.nav li li:hover ul, 
.nav li li li:hover ul, 
.nav li.sfhover ul, 
.nav li li.sfhover ul, 
.nav li li li.sfhover ul {
	left: auto;
	}

.nav li:hover,
.nav li.sfhover { 
	position: static;
	}
	

.current-post-ancestor a, 
.current-post-ancestor a:visited, 
.current-post-ancestor a:hover {
	}
	
.current-menu-item a, 
.current-menu-item a:visited, 
.current-menu-item a:hover {
	}
	
.current_page_item a, 
.current_page_item a:visited, 
.current_page_item a:hover {
	}

[porta3]

Nadie me puede ayudar??? me estoy volviendo loco, lo he probado todo y no hay manera de quitar ese maldito píxel!!

[kseso?]

1:
En el enlace que adjunta al post de este foro se lo explican meridianamente claro.
Los estilos se declaran para li:hover en vez de para li a:hover.

2:
Qué forma más ¿particular? de ocultar y mostrar las listas de segundo nivel.
Lo esconde con un left:-9999px y al hover left: auto
Pero bueno, esto es una digresión .

Para subir ese px:
Recuerde que los márgenes admiten valores negativos.
añada a su .nav li ul un margen superior de -1px (o valor que necesite).