menu superior está invadindo o menu lateral | JavaScript: consumindo e tratando dados de uma API

Fiz o menu lateral e a página ficou bem parecida, porém, quando insiro o código do menu superior, este se sobrepoe ao menu lateral; Segue código:

.menu__lateral{ width: 239px; height: 1426px; padding-top: 70px;

}.menu__opcoes{ display: flex; flex-direction: column; padding-left: 16px; padding-top: 20px; margin-bottom: 32px; gap:20px;

}

.menu__opcoes__item{ display: flex; align-items: center; gap: 16px; }

    <ul class="menu__opcoes">
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/home.png" alt="ícone de casa"></a>
            <p>Início</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/explore.png" alt="ícone de explorar"></a>
            <p>Explorar</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/airplay.png" alt="ícone de shorts"></a>
            <p>Shorts</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/subscriptions.png" alt="ícone de casa"></a>
            <p>Inscrições</p> 
                               
    </ul>

    <hr>

    <ul class="menu__opcoes">
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/video_library.png" alt="ícone de video de biblioteca"></a>
            <p>Biblioteca</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/history.png" alt="ícone de histórico"></a>
            <p>Histórico</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/history_toggle_off.png" alt="ícone de assistir mais tarde"></a>
            <p>Assitir mais tarde</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/thumb_up_alt.png" alt="ícone de joinha"></a>
            <p>Marcados como com like</p> 
                               
    </ul>

    <hr>

    
    <ul class="menu__opcoes">
        <li class="menu__opcoes__item">
            <h2>INSCRIÇÕES</h2>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Alura.png" alt="logo da Alura"></a>
            <p>Alura</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Gaveta.png" alt="avatar do Gaveta"></a>
            <p>Gaveta</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Rafa.png" alt="avatar da Rafaella Ballerini"></a>
            <p>Rafaella Ballerini</p> 
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Atila.png" alt="Avatar do Átila Iamarino"></a>
            <p>Átila Iamarino</p> 
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Souto.png" alt="Avatar do Mario Souto"></a>
            <p>Mario Souto</p> 
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Jovem_Nerd.png" alt="Avatar do Jovem Nerd"></a>
            <p>Avatar do Jovem Nerd</p> 
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/Avatar_Deschamps.png" alt="Avatar do Felipe Deschamps"></a>
            <p>Felipe Deschamps</p> 
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/keyboard_arrow_down.png" alt="ícone de seta para baixo do teclado"></a>
            <p>Mostrar mais 2</p> 
                               
    </ul>

    <hr>

    
    <ul class="menu__opcoes">
        <li class="menu__opcoes__item">
            <h2>MAIS DA PÁGINA</h2>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/ondemand_video.png" alt="ícone de ondemand Vídeos"></a>
            <p>Vídeos Premium</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/movie.png" alt="ícone de claquete"></a>
            <p>Filmes</p>
        <li class="menu__opcoes__item">
            <a href="#" class="item"><img src="./img/sidebar/sports_esports.png" alt="ícone de joystick"></a>
            <p>Jogos</p> 

    </ul>

</aside>

Uma dica que acho válida, vai na tela e inspeciona o código, avaliando o comportamento de cada elemento. Ai você irá perceber o que está sendo estrapolado no menu.

Mas também pode tentar seguir esses passos:

Adicione um contêiner para os menus: Coloque ambos os menus dentro de um contêiner, como uma

, e defina o layout desse contêiner para ser flexível. Isso permite que os menus se ajustem automaticamente para evitar sobreposições.

<div class="menus-container">
    <!-- Seu menu lateral -->
    <aside class="menu__lateral">
        <!-- Conteúdo do menu lateral -->
    </aside>

    <!-- Seu menu superior -->
    <nav class="menu__superior">
        <!-- Conteúdo do menu superior -->
    </nav>
</div>

Defina a posição e o layout dos menus:

Use CSS para definir a posição e o layout dos menus dentro do contêiner. Por exemplo, você pode usar flexbox para organizar os menus horizontalmente ou verticalmente, dependendo do layout desejado.

.menus-container {
    display: flex;
    flex-direction: column; /* Ou row, dependendo do layout desejado */
    /* Adicione outras propriedades de posicionamento conforme necessário */
}

.menu__lateral {
    /* Estilos para o menu lateral */
}

.menu__superior {
    /* Estilos para o menu superior */
}

Ajuste as dimensões e os posicionamentos:

Certifique-se de que os menus tenham dimensões e posicionamentos adequados para evitar sobreposições. Use margens, preenchimentos e tamanhos relativos para garantir que os menus se ajustem dinamicamente ao tamanho da tela.

Com essas mudanças, você deve conseguir evitar a sobreposição entre o menu lateral e o menu superior em sua página. Certifique-se de ajustar os estilos conforme necessário para atender às suas necessidades de design específicas.

Espero ter ajudado!

Mergulhe em programação