How to give the active item in the navigation bar an other color

[Andreas De Rudder]

Hallo,

 

I have on my website a horizontal navigation bar in black. By hoovering an item it becomes grey. But I want now that the active item which page is shown will be red. But it doesn't work. The item only becomes red as long as you are clicking it, but when you leave it it becomes black again. I want it to be red all the time that you are visiting that page.

 

This is the css that I have:

 

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111;
}

#menu li {
float: left;
}

#menu li a {
display: block;
color: white;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 90%;
}

#menu a:hover {
background-color: #808080;
}

#menu a:active {
background-color: red;
}

 

What do I have to change?

Edited February 26, 2016 by Andreas De Rudder

[dsonesuk]

The only way to do this is to add active class, to identify the link is current page, this can be done dynamically using server language such as php or JavaScript.