在导航栏中突出显示当前页面

Question

当我尝试在所有列表中使用 class="active" 时，所有列表都会突出显示，而不仅仅是活动列表。我只想在导航栏中突出显示活动页面。谢谢。

CSS

     .topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

HTML

<div class='topnav'>
  <a class='active' href=''>Home</a>
  <a class='active' href=''>News</a>
  <a class='active' href=''>About Us</a>
  <a class='active' href=''>Contact Us</a>
               
</div>