CSS - Menu responsivo

[thiagosvl 1]

Boa noite!

Estou tendo problemas com meu menu responsivo, uma vez que ele funciona ao clicar - e isso inclui o drop-down -. O erro fica por conta de que metade do menu é "ocultado" pelo conteudo das seguintes div's: div#container, um H3 e a div conteudo.

 

Segue o CSS do MENU:

header#menuCelular {
    height:40px;
    color:#fff;
    width:100%;
    background-color:#0260a9;
    display:none;
}

#btn-menu {
    display:none;
}
/* background-color:#0260a9; */
.menuMobile ul {
    background-color:#0260a9;
    display:flex;
    border-top:1px solid white;
}
.menuMobile ul ul {
    display:none;
}
.menuMobile a {
    display:block;
    padding:15px 0px;
    text-align:center;
    color:#fff;
}
.menuMobile a:hover {
    background: rgba(0,0,0,0.3);
}
.menuMobile ul li:hover ul {
    display:block;
    position:absolute;
}
    
@media (max-width:976px) {    
header#menuCelular {
    display:block;
    position:fixed;
}    
header#menuCelular label#icon-menu {
    font-size:1.6em;
    cursor:pointer;
    display:block;
    height:100%;
    width:40px;
    padding:7px 1px;
    border-right:1px solid white;
}    
header#menuCelular label#icon-seta {
    font-size:1em;
    right:5px;
    position:absolute;
    cursor:pointer;
}    
.menuMobile {
    width:65%;
    transform: translateY(-130%);
    transition:all 0.3s;
    }
/*     background-color:#0260a9; */  
.menuMobile ul {
    display:block;
    background:#0260a9;
    height:100%;
}
.menuMobile ul li {
    border-bottom:1px solid white;
}    
.menuMobile ul li:hover ul {
    display:none;
    position:static;
}    
#btn-menu:checked ~ .menuMobile {
    transform: translateX(0%);
}    
.menuMobile ul ul {
    background-color:#1874CD;
}    
.menuMobile ul ul a {
    padding:15px 35px;
    text-align:center;
}
} 

SEGUE CSS das DIVS:

section#container {
    margin-top:0;
    margin:0;
    border:0;
}
h3.titulo-container-esquerdo {
    border-radius:0;
    background-color:#0260a9;
}    
section#container article#conteudo {
    width:100%;
    text-align:justify;
    position:relative;
    margin:0;
    float:none;
    background-color:transparent;
    border:0;
    margin-top:0.450em;
    min-height:16em;
}

Imagem do erro:

[stromdh 15]

Vi só a barra de últimas atualizações sobre-posta. No header#menuCelular tu coloca um z-index: 2;

e na section#container article#conteudo tu coloca um z-index:1

[tmalexandre 2]

É só adicionar um "z-index:2" na classe .menuMobile.

 

Abraço...

[thiagosvl 1]

Agradeço a atenção de vocês, pois testei e funcionou!

 

Pelo que entendi,a ideia do 'z-index' é distribuir a ordem em que os elementos irão aparecer?

 

Uma outra dúvida quanto ao menu: eu adicionei um position:fixed no header#menuCelular para ele acompanhar todo o scroll do site. Até ai tudo bem, o problema é que se a pessoa clicar nos sub-menu's, o scroll do site não acompanha, pois os <li> também ficam fixo. A unica forma que eu consegui arrumar foi tirando o position:fixed, mas o menu já não acompanha mais o scroll da pagina.

Alguma dica quanto a isso?

Mais uma vez, obrigado.

[stromdh 15]

o z-index só funciona pra quem tem position definida. Cara, não vi qualquer problema no submenu agora.