Está correto o comportamento do conteúdo, de acordo com seu CSS ele deve vir por cima do menu.
Por padrão o z-index
dos elementos é zero, e a ordem de renderização quando os valores "empatam" é desenhar primeiro o pai, e sobre este, o elemento filho.
Quando você quer mover um elemento para cima (mais "perto do usuário") de outro, deve usar um z-index
maior que o elemento que vai ficar oculto/encoberto.
O problema:
Acontece que no seu CSS o conteúdo tem z-index:3
:
#conteudo{
position:absolute;
text-align:justify;
width:100%;
z-index:3; /* <------- */
margin-top:3em;
margin-left:3em;
margin-right:1em;
... e o menu z-index:1
:
#menu{
position:fixed;
z-index:1; /* <------- */
width:100%;
}
...portanto o menu deve ficar atrás do conteúdo.
A solução:
Se deseja o #menu
encobrindo o #conteudo
, precisa que este o primeiro tenha um z-index
maior que o último.
Ou seja:
#menu{
position:fixed;
z-index:4; /* <------- maior que o 3 do #menu */
width:100%;
}
Poderia eventualmente deixar o conteúdo sem z-index
, mas aí pode começar a bagunçar outras partes do projeto.