Aqui segue a imagem e o link do meu projeto : https://github.com/Matheuslc7/Alura-books
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!