How to change active link color in bootstrap css?

Question

I am using joomla 3 and bootstrap.min.js I am creating menu and giving special class in order to change hover, active, visited links and style of the menu. I could not find how to change active link color of menu. Suppose I have 2 menu. Home and Contact. When I am in Home it is red, I want to change this color. I could change a:active and a:hover. Here is code;

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
} 

Even I used div to change color of active link. Here is code

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.

Here is my markup code

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

What do you suggest me to do?

Answer 1

For change the current active link color we can use code in external css file or inline css

.active a
{
background-color:#ff0000;
}