Aqui segue a imagem e o link do meu projeto : https://github.com/Matheuslc7/Alura-books
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá Matheus, tudo bem?
Peço desculpas pela demora em obter um retorno
Primeiramente gostaria de agradecer por compartilhar o seu repositório conosco isso no ajuda muito a sanar dúvidas.
Primeiramente é necessário acessarmos a classe do CSS, que é responsável pela "bolinhas", ou seja, na pasta style e no arquivo carrosel.css, vamos acessar a classe .swiper-pagination e passamos os seguinte valores.
.swiper-pagination {
position: relative;
z-index: 1; /* valor padrão */
margin: .5em 0;
}Utilizei o Z-index com o valor 1 que por sinal é o padrão, mas deixo aqui a fim de aprendizagem, para o mesmo ser habilitado é necessário usar o position, por fim vamos, colocar a lista por cima das bolinhas.
Para isso vamos acessar a lista dentro da pasta style e depois no arquivo header.css, na classe lista-menu, adicionar o z-index para 2, ficando assim:
.lista-menu {
display: none;
position: absolute;
top: 100%;
width: 60vw;
z-index: 2; //nova linha adicionada
}Desse modo a lista se torna o principal item a ser observado passando por cima dos demais como no caso das bolinhas.
Espero ter ajudado, qualquer dúvida me coloco à disposição! Bons estudos!
Sucesso
Um grande abraço e até mais!