Arrow in menu with CSS and apparent when clicked

Question

I’m trying to do almost the same as what was described in this other question: Arrow in menu with CSS only.

But with one small difference: when you click the button that is marked as selected. Show that she’s on that page, but along with the highlighted arrow.

---

And like this now, and I want you to stay in this other image, that the arrow is in the middle, and I can’t do that.

Code

nav a{ 
    text-decoration: none; 
    padding: 8px 8px 8px 8px; 
    color: #ffffff; 
    position: relative;
} 

nav a:hover:before{ 
    width: 0; 
    height: 0; 
    border: 10px solid transparent; 
    border-top-color: #888888; 
    content: ""; 
    bottom: -20px; 
    position: absolute; 
}

Answer 1

First, you have to have a CSS like this:

.dropdown.current {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;
    bottom: -10px;
    left: 20%;
}

Then in each line of the LINK you put in tag of class="dropdown" one if to check if you are on this page, if yes you apply to class='current'.

You are using some server-side, PHP-like language, or just HTML, CSS and JS ?

The if can be done in a JS or PHP code.

---

In his CSS below put the properties:

left: 0; 
right: 0;
margin: auto;

Thus:

nav a:hover:before{ 
    width: 0; 
    height: 0; 
    border: 10px solid transparent; 
    border-top-color: #888888; 
    content: ""; 
    bottom: -20px; 
    position: absolute; 
    left: 0; 
    right: 0;
    margin: auto;
}