Ocultar a seção de uma sombra de caixa

Question

Isenção de responsabilidade: eu já vi as seguintes perguntas e suas soluções não se aplicaram a mim, apesar de serem situações muito semelhantes:

• Criando uma sombra de caixa CSS3 por todos os lados, mas um
• Como adicionar Drop Shadow ao elemento atual em um menu de guia?
• CSS Shadows em 3 lados

Simplificando, estou tentando adicionar um -moz-box-shadow do 0 0 10px para o .current_page_item classe que é aplicada à guia atualmente ativa na navegação da guia no topo de meu website. O site ainda não inclui a sombra de caixa ou qualquer uma dessas alterações, eu só tenho jogado com essas modificações no Firebug por enquanto antes de publicá-las. Naturalmente, isso faz com que a sombra apareça em todos os lados e, portanto, a sombra da borda inferior se sobrepõe ao .content Div, que armazena todo o conteúdo real do blog, ou seja, postagens.

Com base no que vi até agora, parece que eu deveria definir o z-index de algo, não tenho certeza do que (eu tentei ul.menu) para algo mais baixo e o z-index do .content div para algo mais alto, mas isso parece não ter efeito.

Só estou me perguntando se esse é um comportamento normal e, se não, se alguém poderia me ajudar com essa situação.

Obrigado, eu realmente aprecio isso.

EDITAR: Eu coloco box-shadow no post anteriormente, mas eu quis dizer as respectivas diretivas específicas, como -moz-box-shadow. Esse não era o problema que eu estava tendo.

Answer 1

Você precisará adicionar overflow:hidden no ul.menu Como menciona o honeybuzher, mas como isso também cortaria a sombra superior, você deve adicionar alguns padding-top para o ul.menu também..

Answer 2

overflow:hidden sobre ul.menu parece se livrar da sombra inferior.