rafalbino

Fala pessoal! Tô com uma dúvida na versão mobile do meu menu. A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente. Segue o código: .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; } .menu ul{list-style: none;position: relative;float: right;} .menu ul li {width: 200px;float: left;} #menu2 {width: 130px;float: left;} #menu3 {width: 160px;float: left;} .menu ul li:last-child {width: 200px;float: left;} .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;} .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle; font-size: 16px;} .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */ .menu ul li:hover ul{visibility: visible; }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/ .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/ #primeiro{ border-radius: 7px 7px 0px 0px;} #ultimo{ border-radius: 0px 0px 7px 7px;} .menu ul ul li{float: none;width: 200px; }/*Deixando as linhas do submenu na vertical*/ .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/ .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/ .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/ .borda {border-radius: 0;} label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;} #bt_menu{display: none;} label[for="bt_menu"]{display: none;} Agora o código da versão mobile label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;} #bt_menu:checked ~ .menu{margin-left: 0;} .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; } .menu ul{float: none;} .menu ul li{width: 100%;float: none;} .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;} .menu ul ul{ /*Escondendo os subitens no modo mobile*/ position: static;overflow: hidden;max-height: 0;transition: all .9s;} .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/ height: auto;max-height: 900px;} .menu ul ul li{width: 100%} .menu ul ul li:last-child {width: 100%;}

Fala pessoal! Tô com uma dúvida na versão mobile do meu menu. A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente. Segue o código: .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; } .menu ul{list-style: none;position: relative;float: right;} .menu ul li {width: 200px;float: left;} #menu2 {width: 130px;float: left;} #menu3 {width: 160px;float: left;} .menu ul li:last-child {width: 200px;float: left;} .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;} .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle; font-size: 16px;} .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */ .menu ul li:hover ul{visibility: visible; }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/ .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/ #primeiro{ border-radius: 7px 7px 0px 0px;} #ultimo{ border-radius: 0px 0px 7px 7px;} .menu ul ul li{float: none;width: 200px; }/*Deixando as linhas do submenu na vertical*/ .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/ .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/ .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/ .borda {border-radius: 0;} label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;} #bt_menu{display: none;} label[for="bt_menu"]{display: none;} Agora o código da versão mobile label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;} #bt_menu:checked ~ .menu{margin-left: 0;} .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; } .menu ul{float: none;} .menu ul li{width: 100%;float: none;} .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;} .menu ul ul{ /*Escondendo os subitens no modo mobile*/ position: static;overflow: hidden;max-height: 0;transition: all .9s;} .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/ height: auto;max-height: 900px;} .menu ul ul li{width: 100%} .menu ul ul li:last-child {width: 100%;}