CSS : menu problem

How to make my current menu active when i click on it. For example when i click on Home menu , i want to see that menu red, when i click on About menu to see the About menu red.

#header-container nav li a {
display: block;
font-weight: bold;
line-height: 18px;
text-decoration: none;
padding: 6px 15px;
margin: 0 5px;
float: left;
}

#header-container nav.primary-menu ul>:first-child a {
margin-left: 0;

}

#header-container nav li a:hover {
text-decoration: none;

}
#header-container nav li a:active {
text-decoration: none;
color:red;

}

#header-container nav.primary-menu ul li.current_page_item > a:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid;
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;

}

#header-container nav ul.sub-menu li a:after, #header-container nav ul.sub-menu li:after {
content: "";
display: none !important;
}

Now i can see only an arrow on current menu(page) .That is in this line
#header-container nav.primary-menu ul li.current_page_item > a:after