1

Saudação para todos,

sou novo como programação em Frond-End, e estou começando a aprender a mexer com @media para aplicar chaveamento em uma pagina simples,mas o que seria cheveamento?

Criei um site responsivo quando a pagina tem mais de 991px de largura ele aparece o menu, porém quando ele tem menos de 991px aparece um ícone de três barrinhas, e se o usuário quer que apareça o menu estando a menos de 991px ele terá que clicar no ícone para aparecer o menu, como mostro na figura abaixo;

Menu acima de 991px;

inserir a descrição da imagem aqui

Agora o menu a baixo de 991px sem clicar no ícone.

inserir a descrição da imagem aqui

Agora o menu quando clicar no ícone.

inserir a descrição da imagem aqui

O que preciso na verdade é mudar e tira o sublinhado quando passo o mouse, a parte do código responsável por isso seria esse;

@media(max-width: 991px){

    .menu{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        display: none;
        background-color: #bfbfbf;

        border-right: 1px solid #eee;
    }

    .menu a{
        text-decoration: none; 
    }

    .menu--exibindo{
        display: block;
    }

    .menu_item{
        display: block;
        line-height: 3;
    }
}

Mais especificamente essa parte do código referente ao que foi mostrado logo em cima;

.menu a{
        text-decoration: none; 
    }

O problema é que esse código como mostra em cima não faz alteração no menu, era para fazer, eu não sei aonde estou errado.

Deixarei o meu código fonte completo que está no GitHub disponivel para melhores esclarecimentos.

BASTA CLICAR AQUI

1

2 Respostas 2

0

Se você deseja retirar o sublinhado do menu lateral que aparece ao clicar no ícone do menu responsivo, simplesmente tem que usar o css: (baixei e funcionou em localhost)

@media (max-width: 991px){
.menu a {text-decoration: none;}
}

Caso queira tirar este sublinhado do menu em telas maiores, use o css:

.menu a {text-decoration: none;}
0

Na verdade o seu problema não está no media query. Para mudar a propriedade de sublinhado quando passa o mouse, você tem que selecionar o atributo hover do CSS (que é a estilização responsável para quando os elementos terão o mouse em cima deles)

O seu código dentro do media query tem que ficar assim então:

.menu a:hover{
    text-decoration: none; 
}

Você deve fazer log-in para responder a esta pergunta.