I cannot place the link with the ACTIVE function

Asked

Viewed 244 times

1

I have a menu, on my site in wordpress, that when passing the mouse (if) it load a border at the base, so far so good, but I can not put the ACTIVE function for when the person is on the related page the link is with border bottom appearing!! Follows 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 image from the menu:

inserir a descrição da imagem aqui

In this print, the edge is just showing up because I have mouse on top. Thank you for your attention!

css wordpress css3 menu css-hover

2 answers

1


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

There are solutions with javascript for what you want, however follows an example using the 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>

  • Sorry I don’t understand!! This border-bottom appears (I want it to appear) when I hover over the menu, It already works! What I want is for it to be visible on the active menu pages. When you are on the page, for example video gallery, it will be visible in the menu. Sorry my ignorance!! Thank you for your attention!

  • This in wordpress.

  • I managed to solve. #site-navigation .dropdown-menu a:hover, #site-navigation .dropdown-menu > .current-menu-item > a, #site-navigation .dropdown-menu > .current-menu-parent > a{&#xA;&#xA; text-decoration: none;&#xA; border-bottom: 3px #cf111d;&#xA; background-color: #fff;&#xA; border-style: solid;&#xA; border-bottom-style: solid;&#xA;&#xA;}&#xA;

1

I resolved so:

#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;

}

Browser other questions tagged css wordpress css3 menu css-hover

You are not signed in. Login or sign up in order to post.