How to change the background color of Active links in a menu bar?

Question

I copied the following code from w3schools.com and added it to all pages on my website. Navigation is working fine, but Background color of active links in the menu doesn't change.

How can I fix this?

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7A991A; } 

 <ul> <li> <a href="/home.php">Home</a> </li> <li> <a href="/news.php">News</a> </li> <li> <a href="/contact.php">Contact</a> </li> <li> <a href="/about.php">About</a> </li> </ul> 

Answer 1

You would need to add a CSS class on the active page. Here i added class="active"

Change CSS as below

a:hover,
a:active,
a.active {
  background-color: #7A991A;
}

On home.php change the navigation code as below.

<ul>
  <li>
    <a href="/home.php" class="active">Home</a>
  </li>

  <li>
    <a href="/news.php">News</a>
  </li>
  <li>
    <a href="/contact.php">Contact</a>
  </li>
  <li>
    <a href="/about.php">About</a>
  </li>
</ul>

On news.php make the change as below, Similarly for other pages

<ul>
  <li>
    <a href="/home.php">Home</a>
  </li>

  <li>
    <a href="/news.php" class="active">News</a>
  </li>
  <li>
    <a href="/contact.php">Contact</a>
  </li>
  <li>
    <a href="/about.php">About</a>
  </li>
</ul>