Tu estructura si bien no es una conocida y por cuestiones de semantica o accesibilidad no la recomiendo (sobre todo por el exceso de "div" innecesarios)
Esto no quiere decir que sea imposible de usar y por ejemplo para lograr tu objetivo te recomiendo:
Primero: asignale a tu contenedor con el id "menu" un cambio en su modelo de caja para transformarlo en una tabla usando "
display: table;" y además un ancho del 100%.
Código CSS:
Ver original#menu
{
display: table;
width: 100%;
}
: a todos los div anidados asignales un "
display: table-cell;" de esta manera trataran automáticamente unos tamaños relativos con el fin de llenar toda la estrucutura. Puedes usar el selector "#menu>div" o la clase que tu usas ".menu".
Tercero: Habiendo hecho esto, solo queda decirle al ultimo div o celda, que deberá ocupar siempre un ancho que ocupe el resto del contenido, por lo que le podemos especificar "
width: 100%;" de esta forma conseguirás tu objetivo.
Puse un ejemplo de como se vería en este
http://codepen.io/g3kdigital/pen/wDocC
Por cierto, francamente la estructura del html es un poco extraña para un menu.
Actualmente no conozco una forma de que solo con html o css se calcule un espacio cuando no hay ninguno de los siguientes 3 factores bien definidos: Estructura, Modelo de caja o Medidas (ya sean en pixeles, porcentajes, em, etc).
Por lo que te invito a estudiar un poco estructuras html (en google hay montones de ejemplos) mira este por ejemplo
http://codepen.io/g3kdigital/pen/oKDlf