Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] e nao ta dando para clicar

Opa bão?

meu menu n esta deixando clicar no ultimo link quando no modo mobile.! [foto da tela] (Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

ate onde vi meu codigo esta igual ao da professora. vou deixar o link para o depositório do GitHub dele.

GitHub

estou tentando aplicar um :hover no menu de 1024px mas ele esta agindo de forma estranha. entao quando vc olhar o código se puder dar uma olhada para ver se ja consegui resolver ficarei grato xD

2 respostas

Boa noite, tudo bem, Tairone?

Para resolver esse problema, adicione z-index na classe:

.lista__menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
    z-index: 10; /* Quando você usa `position: absolute`, podem ocorrer problemas de sobreposição caso o `z-index` não seja definido. */
}

O z-index define a camada do elemento visível para o usuário. Quanto maior o valor, maior a prioridade do elemento para aparecer em cima dos outros na tela.

Sobre o hover, seus links estão com display: inline, o que dificulta o hover sobre o menu, fazendo com que a área de interação fique muito pequena.

Para resolver isso, defina a tag com display: block para que ela ocupe 100% da largura disponível, como mostra o código abaixo e adicione o padding na class ".lista-menu__link" e tire da ".lista-menu__item" o padding :

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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

/* separar o padding da lista */
.lista-menu__titulo {
    padding: 1em;
}

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

.lista-menu__item {
    border-bottom: 1px solid var(--azul);

}

.lista-menu__link {
    background: var(--azul-degrade);
    color: var(--azul);
    /*  adicionar cor no link */
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    text-decoration: none;
    /* tirar decoração do link */
    background-clip: text;
    text-transform: uppercase;
    padding-block: 1rem;
    /*  trocar o padding para os links */
    display: block;
    /*  adicionar display block */
    padding-left: 1rem;
    /*  adicionar o espaçamento a esquerda */
}

/* Adicionar o HOVER */
.lista-menu__link:hover {
    background: rgba(190, 190, 190, 0.553);
    color: black;
}
Fazendo essas alterações, será resolvido o seu problema de CSS.
solução!

muito obrigado vou aplicar agora as modificações :D