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;
}
}