1
resposta

O menu de itens da lista "categoria" não abre ao clicar.

Está funcionando no menu hamburguer mas não na lista ´´categoria´´.

     <header class="header_principal">
        <div class="header_div">
            <input type="checkbox" id="menu_input">
            <label for="menu_input">
                <span class="menu_hamburguer"></span>
            </label>
            <ul class="menu_ul">
                <li class="menu_listas_titulo">Categorias</li>
                <li class="menu_listas">Programação</li>
                <li class="menu_listas">Front-End</li>
                <li class="menu_listas">Infraestrutura</li>
                <li class="menu_listas">Business</li>
                <li class="menu_listas">Design & UX</li>
            </ul>

            <img class="header_principal_logo" src="img/Logo.svg" alt="">
            <h2 class="header_principal_titulo"><strong>Alura</strong>Books</h2>
            <ul class="header_principal_listas">
                 <input type="checkbox" name="" id="header_principal_listas_checkbox">
                 <label for="header_principal_listas_checkbox"><li class="header_principal_listaa">Categorias</li></label>
                <li class="header_principal_lista">Favoritos</li>
                <li class="header_principal_lista">Minha Estante</li>
            </ul>
            <ul class="menu_ul">
                <li class="menu_listas_titulo">Categorias</li>
                <li class="menu_listas">Programação</li>
                <li class="menu_listas">Front-End</li>
                <li class="menu_listas">Infraestrutura</li>
                <li class="menu_listas">Business</li>
                <li class="menu_listas">Design & UX</li>
            </ul>
        </div>
        <div class="header_div">
            <img class="header_principal_favoritos" src="img/Favoritos.svg" alt="">
            <img src="img/Sacola.svg" alt="">
            <img src="img/Usuario.svg" alt="">
        </div>
    </header>
@import url(reset.css);
@import url(../style/header.css);
@import url(../style/section.css);
@import url(../style/carrosel.css);
@import url(../style/cards.css);
@import url(../style/segundo-carrosel.css);
@import url(../style/visitados.css);
@import url(../style/email.css);
@import url(../style/rodape.css);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


:root {
    --background-cinza: #EBECEE;
    --branco: #FFFFFF;
    --font-principal: 'Poppins';
    --laranja: #EB9B00;
    --preto: black;
    --degrade-azul: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
    --font-desktop: 'Josefin Sans', sans-serif;
}

body {
    background-color: var(--background-cinza);
    color: var(--branco);
    font-family: var(--font-principal);
}
:root {
    --background-cinza: #EBECEE;
    --branco: #FFFFFF;
    --laranja:  #EB9B00;
}

.header_principal {
    background-color: var(--branco);
    display: flex;
    justify-content:space-between;
    padding: 16px 24px;
    position: relative;

}

.header_div {
    display: flex;
    gap: 10px;
    margin-right: 1.5em;
}

#menu_input {
    display: none;
}

.menu_hamburguer {
    height: 48px;
    width: 48px;
    background-image: url(../img/Menu.svg);
    display: inline-block;
}

.menu_ul {
    background-color: white;
    position: absolute;
    top: 100%;
    width: 60vw;
    display: none;
}

#menu_input:checked~.menu_ul {
    display: block;
}

.menu_listas, .menu_listas_titulo {
    color: black;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: var(--branco);
} 

.menu_listas_titulo {
    color: var(--laranja);
    font-weight: 700;
}

.header_principal_titulo {
    color: var(--preto);
    font-family: var(--font-desktop);
    font-size: 30px;
    margin-top: 0.5em;
    display: none;
}

.header_principal_listas {
    color: var(--preto);
    display: none;
    margin: 1.3em 0 0 2em;
    gap: 1em;
}
.header_principal_lista {
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}
#header_principal_listaa {
   display: none;
}

#header_principal_listaa:checked ~ .menu_ul {
    display: block;
}


@media screen and (min-width:1024px) {
    .header_principal_titulo {
        display: block;
    }

    .menu_hamburguer {
        display: none;
    }

    .header_principal_logo {
        margin-left: 3em;
    }

    .header_principal_listas {
        display: flex;
    }
    .header_principal_favoritos {
        display: none;
    }

    .header_div {
        gap: 3em;
    }

    .header_principal_listas_checkbox:checked ~ .menu_ul {
        display: block;
    }
}
1 resposta

A unica ideia que eu tive seria voce corrigir essa parte do código:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tirar esse name="" e arrumar o li class="header_principal_listaa" para li class="header_principal_lista"

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software