Hover em menu de CATEGORIAS

Oi Saul, tudo bem?

Primeiramente, sobre o desalinhamento das listas quando você clica em "Categorias", parece que o problema está relacionado com o CSS. Infelizmente, sem ver o restante do seu código CSS, fica um pouco difícil identificar o problema exato. No entanto, uma dica é verificar se você tem algum padding ou margin aplicado em outra parte do código que possa estar causando esse desalinhamento.

Mas se não conseguir fazer essa verificação, por favor, coloque todo seu código aqui, que assim fica mais fácil de fazer testes.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Em relação à sua segunda dúvida, para ativar a lista de categorias ao passar o mouse por cima (hover), você pode usar o pseudo-elemento :hover no CSS. No entanto, o hover não funcionará em dispositivos touch, como smartphones e tablets, pois eles não têm um conceito de "hover" como os dispositivos com mouse. E também não é a melhor maneira de fazer isso (por questões de usabilidade), mais pra frente, você irá ver cursos sobre JavaScript e ele é mais adequado para essas situações. Mas irei deixar um exemplo de como você pode fazer:

Aqui está um exemplo de como você pode fazer isso:

.opções {
    display: none;
}

.opções__item:hover .lista-menu {
    display: block;
}

.opções__botão {
    display: none;
}

.lista-menu {
    display: none;
    background-color: var(--azul);
    color: var(--branco);
    padding: 1em 1.5em;
    display: none;
    background-color: var(--azul);
    color: var(--branco);
    padding: 0.5em 1em; /* Ajuste o padding conforme necessário */
    width: 200px; /* Ajuste a largura conforme necessário */
    max-height: 300px; /* Ajuste a altura máxima conforme necessário */
    overflow-y: auto; /* Adiciona uma barra de rolagem caso as opções excedam a altura máxima */
}

.lista-menu__item:hover {
    background-color: var(--azul);
}

.lista-menu__link {
    color: var(--branco);
}

Neste código, você pode ajustar a propriedade width para controlar a largura da caixa de opções do menu. Além disso, você pode ajustar a propriedade max-height para controlar a altura máxima da caixa. Se as opções excederem a altura máxima definida, uma barra de rolagem será adicionada automaticamente. Certifique-se de ajustar o valor de padding de acordo com suas preferências de espaçamento interno.

E você também precisará modificar os nomes das tags pois usei como está na aula, vi que você nomeou diferente.

Um abraço e bons estudos.

Oi Lorena, obrigado pela resposta! Bom, consegui aplicar as alterações no meu código. Vou te mandar todo o CSS dessa seção:

.cabeçalho__menu-hamburguer{
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display:inline-block;
}

.cabeçalho{
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

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

.container__imagem{
    padding: 1em;
}

.lista-menu{
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__botao:checked ~ .lista-menu{
    display: block;
}

.lista-menu{
    background-color: var(--branco);
    z-index: 2;
}

.lista-menu__titulo, 
.lista-menu__item{
    padding: 1em;
    background-color: var(--branco);
}

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

.lista-menu__link{
    background: var(--azul) ;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.container__botao{
    display: none;
}

.container__titulo{
    display: none;
}

.opcoes{
    display: none;
}

@media screen and (min-width: 1024px) {
    .container__titulo, 
    .container__titulo--negrito{
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }

    .container__titulo{
        font-weight: 400;
        display: block;
    }

    .container__titulo--negrito{
        font-weight: 700;
    }

    .opcoes{
        display: flex;
    }

    .opcoes__item{
        padding: 0 1.5em;
        text-transform: uppercase;
    }

    .opcoes__link{
        text-decoration: none;
        color: var(--preto);
    }

    .container__imagem-transparente{
        display: none;
    }

    .cabeçalho__menu-hamburguer{
        display: none;
    }

    .container__imagem{
        margin-right: 1em;
    }

    .opcoes__botao:checked ~ .lista-menu{
        display: block;
        width: auto;
    }

    .opcoes__botao{
        display: none;
    }
/* Aplicação do hover no menu de categorias */
    .opcoes__item-categoria:hover{
        background: var(--azul);
        color:var(--branco);
        padding: 1em 1.5em;
    }

    /* .opcoes__item-categoria:active{
        background: var(--azul);
        color: var(--branco);
        padding: 1em 1.5em;

    } */

    .lista-menu__itens:hover .lista-menu__link{
        color: var(--branco);
    }

    .lista-menu__item:hover{
        background-color: var(--azul);
    }

/* ------------------------------------------ */    
}