Adicione o z-index:999;
à classe menu
também.
.menu
{
...
z-index:999;
}
Edit: para documentar para a posteridade:
O z-index
equivale à posição na coordenada Z; o eixo Z é tido como aquele que "sai" da tela e cresce em direção ao rosto do usuário. Ou seja: quanto maior o índice Z, mais para "perto" do usuário o elemento vai, sobrepondo-se àqueles com coordenada Z mais baixa.
O valor de 999 foi uma sugestão, tendo em vista que você já utiliza z-index: 1
e z-index: 999
e isto parece funcionar bem (não houve reclamação em relação à disposição inicial dos componentes, apenas em relação aos ítens do menu).
Porém, conforme o @FelipeStoker apontou, você pode fazer um estudo das coordenadas de acordo a organizar a sequência em que os ítens se sobrepõem no eixo Z. Caso, para 2 elementos A e B, não haja competição por espaço no plano XY (A nunca irá se sobrepor a B), um mesmo valor de z-index
pode ser aplicado aos dois, sem prejuízo.