Intentando cambiar el color de fondo y el color del texto del enlace actual

Estoy tratando de cambiar el color de fondo y el color del texto cuando se presiona un enlace en una barra de navegación.

Usé el estilo .currentLink pero todavía no se aplica al enlace actual. Estoy seguro de que me estoy perdiendo algo simple, pero parece que no puedo encontrar ayuda en mis libros de codificación o tutoriales en línea.

Esto es lo que tengo hasta ahora en la hoja de estilo CSS, pero aún no funciona:

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>