use this code

nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}


nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   <nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>
  </nav>
  

If you are using a framework like bootstrap or similar, it may be that the styles are being stepped on, in this case you can use !important in your css to step on the styles of the framework:

nav ul.horizontal > li > a:active {
    color: #aa0000 !important;
}

I am trying to change the background color and text color when a link in a nav bar is pressed.

i used the .currentLink style but it is still not applying to the current link. I’m sure i am missing something simple but cant seem to find any help in my coding books or online tutorials.

This is what i have so far in the css style sheet but it is not working still:

CSS:

nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

.currentLink {
   color: #aa0000;
   background-color: #007700;
}

HTML:

<nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>