1ro reemplaza display:inline por display:inline-block, inline es para definir un texto (cosa que no puede ser un menu) e inline-block es para que los elementos bloques, se coloquen uno al lado del otro, perdiendo entre cosas su ancho:100% y este atributo queda determinado por el contenido o por el ancho que especifiquemos, además de poder recibir propiedades como: padding, border, entre otros.
2do La razón de que el hover sobrepase el ancho del li, era por el display: inline del .menu, prueba como te dije a cambiarlo por inline-block.
3ro No intentes, darle paddging a los LI, sino al enlace y a este añadele la propiedad: display: block o inline-block. Eso te quitara dolores de cabeza en cuanto accebilidad, vistas moviles y hovers.
4to La diferencia entre float e inline-block, es que el primero "saca" a los elementos del flujo normal del documento y los flota como globos, es decir hacia arriba. Eso evita el espacio entre objetos que comentas, pero añade un problema y es que automaticamente al elemento siguiente sino tiene float, de igual manera lo flota, tienes siempre al final de usar un float, añadir un elemento que limpie los flotados "clear:both", esto es un problema que esta bien documentado en la web. El segundo como te dije, hace que los elementos se comporten como bloques (div) pero a la vez como textos, por eso se colocan uno al lado del otro, pero los textos siempre tienen un espacio por defecto entre sus caracteres (por eso el espacio blanco), para eliminarlo tienes varias opciones, solo colocare las más usuales:
Código CSS:
Ver original.padre /*en tu caso el ul*/
{
font-size: 0;
letter-spacing: -1px; /*o el que quieras*/
}
.hijo /*en tu caso los li*/
{
font-size: initial;
letter-spacing: normal;
}
Código CSS:
Ver original.padre
{
letter-spacing: -0.35em; /*depende de la tipografia que uses, pero normalmente es este*/
}
Código CSS:
Ver original.hijo
{
margin-right: -0.35em; /*reitero que depende de la tipografia que uses*/
}
Cualquier otra duda, me comentas.