Problema con enlaces

Hola a todos!! A ver si me podéis ayudar con esta duda. Tengo un menú horizontal (en construcción) y tengo puesto los enlaces en estado hover para que al poner el ratón encima cambie de color el fondo del enlace en cuestión. Lo que no sé es porqué el fondo del enlace no ocupa toda la casilla en la que está ese enlace, sólo rellena la parte de las letras del enlace y me gustaría que ocuparía todo. Os dejo el código

Código en html:

<div id="navegacion">
    <ul><li><a href="#">Inicio</a></li><li><a href="#">Productos</a></li><li><a href="#">Cat&aacutelogos</a></li><li><a href="#">Contacto</a></li></ul>
   </div>

Código en css

#navegacion {background-color: white ; border: black 1px solid; margin:10px 0px;height:30px; font-family:"Times New Roman", Times, serif ;font-weight: bold;}
#navegacion ul {margin-left: 300px;} 
#navegacion li {float:left; list-style:none; margin:0px 0px 0px 0px;border-right: black 1px solid; border-left: black 1px solid;padding:5px;}

a {color: #3537FF ; text-decoration: none; display: block;}
a:link {}
a:visited {color: Blue;}
a:hover { color: #00008B; text-decoration: none; background-color: #9B9CFF;}
a:active {}

Espero haberme explicado bien.

Un saludo y gracias!!

Hola:

Esto funciona:

#navegacion {background-color: white ; border: black 1px solid; margin:10px 0px; font-family:"Times New Roman", Times, serif ;font-weight: bold;}
#navegacion ul {margin-left: 300px;}
#navegacion li:first-child { border-left: 1px solid black; }
#navegacion li {float:left; list-style:none; margin:0px 0px 0px 0px;border-right: black 1px solid;}
#navegacion ul:before,
#navegacion ul:after { content: ' '; display: table;	}
#navegacion ul:after { clear: both; }
a {color: #3537FF ; text-decoration: none; display: block; padding: 5px;}
a:link {}
a:visited {color: Blue;}
a:hover { color: #00008B; text-decoration: none; background-color: #9B9CFF;}
a:active {}

Hola skaparate, sí que es verdad que el código que me pones funciona correctamente en Firefox pero en el Explorer no me aparece el borde de la izquierda del primer enlace. ¿Alguna solución? Y otra cosa, si aumento el tamaño de mi menú, ¿qué debo hacer para que se adapte tu código? He estado probando a aumentar el padding que pones a 5px y parece que funciona bien, ¿con eso bastaría?