I can not put the link with the ACTIVE function

Navigation
1

I have a menu, in my website in wordpress, that when I move the mouse (there) it loads a border in the base, so that's fine, but I can not put the ACTIVE function for when the person is on the page related to the link stay with the border bottom appearing !! Here is the code: 

.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;
}

The menu image:

In this print, the border is only appearing because I have a mouse on it. Thank you for your attention!

    
asked by anonymous 24.02.2017 / 17:27

2 answers

1

pseudo-class :active is detected the moment the user clicks the link, but returns its state when it looses.

There are solutions with javascript for what you want, however an example using 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>
    
24.02.2017 / 17:34
1

I solved it like this: 

#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 / 20:05
Error sending E-mail using Hotmail as CommonsMail Java Protecting methods of a DLL [duplicate]