Estou tentando criar um menu responsivo - a princípio sem dropdown - e ele funciona bem, até a parte principal (pasmem haha), que é quando eu aperto na imagem - no caso um checkbox - e o menu não aparece.
Acredito que o erro esteja na seguinte linha:
input#btn-menu:checked - nav.menu {
margin:0;
}
Com o código acima, ele deveria remover o width:70% que existe no código do nav,menu, que segue:
-
nav.menu { position:absolute; background:#4e94ab; width:70%; }HTML
-
<!DOCTYPE html> <html lang="pt-br"> <head> <title>MENU</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum scale=1, minimum scale=1"> <link rel="stylesheet" href="menu.css"> </head> <body> <header> <input type="checkbox" id="btn-menu"> <label for="btn-menu"><img src="_imagens/icone-menu.png" width="35" height="35" alt=""></label> <nav class="menu"> <ul> <li><a href="">Inicio</a></li> <li><a href="">Inicio</a></li> <li><a href="">Inicio</a></li> <li><a href="">Inicio</a></li> <li><a href="">Inicio</a></li> </ul> </nav> </header> </body> </html>
CSS:
-
body { margin:0; font-family: sans-serif; } header { width:100%; background:#4e94ab; } input#btn-menu { display:none; } header label { display:none; width:30px; height:30px; padding:10px; border-right:1px solid #fff; } header label:hover { cursor:pointer; background:rgba(0,0,0,0.3); } nav.menu ul { margin:0; list-style-type:none; padding:0; display:flex; } nav.menu li { border-right:1px solid #fff; } nav.menu li:hover { background: rgba(0,0,0,0.3); } nav.menu li a { display:block; padding:15px 20px; color:#fff; text-decoration:none; } @[member="MEDIA"] (max-width:768px) { header label { display:block; } nav.menu { position:absolute; background:#4e94ab; width:70%; } nav.menu ul { flex-direction:column; } nav.menu li { border-top:1px solid #FFF; } input#btn-menu:checked - nav.menu { margin:0; } }
Obs.: Como eu faço para adicionar um dropdown nesse menu?
Conto com vocês!
obrigado,
Thiago.