[Dúvida] Lista nao aparece | HTML e CSS: responsividade com mobile-first

MINHA LISTA NAO APARECE

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/reset.css">
    <script src="main.js"></script>
    <title>AluraBooks</title>
</head>

<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container_botao">
            <label for="menu">
                <span class="cabecalho_hamburguer" onclick="clickMenu"></span>
            </label>
            <img src="imagens/Menu.png" alt="Barra do menu" class="img">
            <ul class="lista">
                <li class="lista_menu">
                    Categorias
                </li>
                <li class="lista_menu">
                    PROGRAMAÇÃO
                    <a class="menu_link" href="#"></a>
                </li>
                <li class="lista_menu">
                    FRONT-END
                    <a class="menu_link" href="#"></a>
                </li>
                <li class="lista_menu">
                    INFRAESTRUTURA
                    <a class="menu_link" href="#"></a>
                </li>
                <li class="lista_menu">
                    BUSINESS
                    <a class="menu_link" href="#"></a>
                </li>
                <li class="lista_menu">
                    DESIGN & UX
                    <a class="menu_link" href="#"></a>
                </li>
            </ul>
            <img src="imagens/Logo.png" alt="Logo da Alura" class="img">
        </div>
        <div class="container">
            <a href="#"><img src="imagens/Favoritos.png" alt="Meus favoritos" class="img"></a>
            <a href="#"><img src="imagens/Group.png" alt="Sacola de compras" class="img"></a>
            <a href="#"><img src="imagens/Usuario.png" alt="Login usuario" class="img"></a>
        </div>
    </header>
</body>

</html>






:root {
    --cor-fundo: #EBECEE;
    --cor-fundo-header: #FFF;
}

body {
    background-color: var(--cor-fundo);
}

.cabecalho {
    background-color: var(--cor-fundo-header);
    display: flex;
    justify-content: space-between;
}

.lista_menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container {
    display: flex;
    align-items: center;
}

.img {
    padding: 1em;
}

.container_botao:checked~.lista_menu {
    display: block;
}

Oi Larissa, tudo bem com você?

Sinto muito que não está dando certo. Acredito que esse problema está ocorrendo porque no HTML, a lista está definida como <ul class="lista">, mas no CSS, a classe que estiliza a lista é .lista_menu. Essa diferença faz com que o CSS não consiga aplicar os estilos corretos à lista, pois está procurando uma classe diferente da que foi definida no HTML.

Para corrigir isso, você pode ajustar o nome da classe no HTML para que seja igual à classe definida no CSS. Por exemplo, alterar <ul class="lista"> para <ul class="lista_menu"> no HTML.

Recomendo que você veja a aula novamente, e vá fazendo essas alterações, assim ficará mais fácil.

Após essa correção, o CSS conseguirá aplicar os estilos corretamente à lista.

Espero ter conseguido ajudar, qualquer dúvida estou à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!