als op een menu wordt geklikt de tekst kleur veranderd, border-bottom verdwijnt!

hallo,
mij style.css code is als volgende:

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: royalred;
}
a:active,
a:visited {
	blue;
}

a:hover,
a:focus,

 {
 color: blue;
}
a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {
	display: block;
	float: left;
   margin-top:20px;

   border-bottom:1px solid grey;
width:100%;  

}

.main-navigation ul {
	display:block;
	list-style: none;   

}

.main-navigation li {
	float: left;

}

.main-navigation a {
	display: block;
	text-decoration: none;
       border:1px solid grey ;
       border-bottom:none;
       color:grey;
       padding-left: 30px;
      padding-right:30px;
      width:auto;
      font-size: 16px;
      font-weight: bold;
       text-align:center;
        height:30px;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a
 {
    color: blue;  

}

.main-navigation li:active > a,
.main-navigation li.visited > a

{
color:green;
border-bottom:none;

}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {

}

.main-navigation ul ul li {

}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

als U gaat naar deze url:http://webdesignleren.net
dan u ziet ik heb een opmaak menu in CSS.
Nu mij doel is als iemand klikt op een willekeurige menu ,dat deze menu veranderd zijn tekst(pagina titel) kleur van blauw naar groen en blijft op groen totdat deze pagina is open.
ik heb het volgende geprobeerd net als U ziet in CSS code boven:

.main-navigation li:hover > a,
.main-navigation li.focus > a
 {
    color: blue;
}

.main-navigation li:active > a,
.main-navigation li.visited > a

{
color:green;
border-bottom:none;

}

maar toch ik krijg het alleen als ik klik op een willekeurige eerst groen en dan weer blauw.
ik wil ook als op een menu wordt geklikt de border-bottom verdwijnt.
ik heb deze code toegevoegd maar toch het werkt niet. de cod is nog 1 keer:

.main-navigation li:active > a,
.main-navigation li.visited > a

{
color:green;
border-bottom:none;

}

hoe ik kan deze 2 problemen oplossen of wat ik doe het verkeer.
ik heb in header.php en custom.header.php bekijken maar daar is niets te zoeken.ik heb ook