1

Tenho um menu, no meu site em wordpress, que ao passar o mouse (houver) ele carregar uma borda na base, até ai tudo bem, mas não consigo colocar a função ATIVO para quando a pessoa estiver na página relacionada o link fique com a border bottom aparecendo!! Segue o código:

.dropdown-menu > li > a:hover {
    text-decoration: none;
    color: #ffffff;
    border-bottom: 3px #cf111d;
    background-color: #fff;
    border-style: solid;
    border-bottom-style: solid;
}


.dropdown-menu > li > a:active {
    text-decoration: none;
    color: #ffffff;
    border-bottom: 3px #cf111d;
    background-color: #fff;
    border-style: solid;
    border-bottom-style: solid;
}

A imagem do menu:

inserir a descrição da imagem aqui

Nessa print, a borda só esta aparecendo pq estou com mouse em cima. Agradeço a atenção de todos!

0

2 Respostas 2

1

A pseudo-class :active é detectadada no momento que o usuário clica no link, mas retorna seu estado quando ele solta.

Existem soluções com javascript para o que quer, entretanto segue um exemplo usando a pseudo-class :target :

<body>
<ul>
    <li><a id="sop" href="#sop">Sobre o Premio</a></li>
    <li><a id="gdv" href="#gdv">Galeria de vídeos</a></li>
</ul>
</body>
<style>
a{text-decoration:none;color: red;}
:target{
    outline:none;
    border-bottom: 3px solid red;
}
ul{	list-style-type: none;
    margin: 0;
    padding: 0;
}
li{display: inline-block;}
</style>

3
  • Desculpe não entendi!! Esse border-bottom aparece (quero que apareça) quando passo o mouse por cima do menu, Isso já funciona! O que eu quero é que ele fique visível nas páginas ativas do menu. Quando estiver na página, por exemplo galeria de vídeos, ele ficará visível no menu. Desculpe a minha ignorância!! Agradeço sua atenção! 24/02/2017 às 16:47
  • Esta em wordpress. 24/02/2017 às 16:56
  • Consegui resolver. #site-navigation .dropdown-menu a:hover, #site-navigation .dropdown-menu > .current-menu-item > a, #site-navigation .dropdown-menu > .current-menu-parent > a{ text-decoration: none; border-bottom: 3px #cf111d; background-color: #fff; border-style: solid; border-bottom-style: solid; } 24/02/2017 às 18:39
1

Resolvi assim:

#site-navigation .dropdown-menu a:hover, #site-navigation .dropdown-menu > .current-menu-item > a, #site-navigation .dropdown-menu > .current-menu-parent > a{

    text-decoration: none;
    border-bottom: 3px #cf111d;
    background-color: #fff;
    border-style: solid;
    border-bottom-style: solid;

}

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .