[Ovillo] Menú horizontal

[Ignacio Fortea]

Estoy intentando hacer un menú horizontal como el que sigue:
http://yzweb.iespana.es/pantallazo.jpg

Y a mí me ha quedado:
http://yzweb.iespana.es/menu.jpg

Este es mí código HTML:

<div id="cabecera">
	<h1><a href="/index.asp">
		<img src="/imagenes/cabecera/logoAE.jpg"
alt="Aragonempleo.com" />
	</a></h1>
	<a
href="http://es.serlog21.centraltest.com/esptest/@test/part_liste.php"
title="Centraltest.com" target="_blank">
	<img src="/imagenes/banners/tests.gif" alt="Centraltest" width="468"
height="60" border="0" />
	</a>
</div>

<div id="navegador">
	<ul>
		<li><a href="/area_candidatos/validar.asp" title="Accede a
tu curriculum">&Aacute;rea candidatos</a></li>
		<li><a href="/menu_privado/area_privada.asp" title="Acceso
para empresas">&Aacute;rea empresas</a></li>
		<li><a href="/ofertas/busqueda_avanzada.asp" title="Busca la
oferta que m&aacute;s se amolde a tu perfil">Buscar ofertas</a></li>
		<li><a href="/ofertas/empresas_destacadas.asp"
title="Consulta las ofertas publicadas por nuestras empresas
colaboradoras">Ofertas por empresas</a></li>
		<li id="contacto"><a href="#" title="Si quieres contactar
con nosotros"
onclick="AbrirCentrada('/serviciosextra/contactar_empresa.asp','',584,380)">
Contactar</a></li>
	</ul>
</div>


Y esta la CSS:
#cabecera {
	background: url('/imagenes/cabecera/fondocab_degradado.gif')
repeat-y center center;
	height: 66px;
}
#cabecera h1 {
	display: inline;
	margin: 0px;
}
#cabecera h1 a img {
	border: 0px;
}
#cabecera a {
	text-decoration: none;
}

/* NAVEGADOR SUPERIOR */
#navegador:before, #navegador:after {
	content: url(/imagenes/cabecera/cuadradito.gif);

}
#navegador {
	margin: 0.2em 0em;
}
#navegador ul {
	margin: 0px 10px;
}
#navegador li {
	margin: 0em 2px;
	float: left;
	
	background: #005692;
	list-style: none;
	
}
#navegador li a {
	color: #FFFFFF;
	display: block;
	text-align: center;
	width: 132px;
	min-height: 2.5em;
	line-height: 2.3em;
	font-size: 8pt;
	text-decoration: none;
}

A ver si pueden ayudarme.