<ul>
   <li>Academics
   </li>
   <li>Tuition and Enrollment
   </li>
   <li>Resources and Policies
   </li>
   <li>Inside Extension
   </li> </ul>

 <nav>
   <ul id="extnav">
     <li>Academics
     </li>
     <li>Tuition and Enrollment
     </li>
     <li>Resources and Policies
     </li>
     <li>Inside Extension
     </li>   </ul> </nav>

In style element (<style>) within head element:

ul#extnav {
  list-style: none;
}
ul#extnav li {
  display: inline-block;
}

 <nav>
   <ul id="extnav">
     <li>
       <a href="#">Academics       </a>
     </li>
     <li class="active">
       <a href="#">Tuition and Enrollment       </a>
     </li>
     <li>
       <a href="#">Resources and Policies       </a>
     </li>
     <li>
       <a href="#">Inside Extension       </a>
     </li>   </ul> </nav>

In head element:

<link rel="stylesheet" href="example8.css"/>

In example8.css

* {
  background-color: white;
}

ul#extnav {
  list-style: none;
  font-weight: bold;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #1e1e1e;
  background-color: white;
  margin-top: 1em;
}

ul#extnav li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul#extnav a {
  padding: 0.5em;
  margin-right: 0;
  background-color: white;
  border-right: 1px solid black;
}
ul#extnav li:last-child a {
  border-style: none;
}
ul#extnav a:link,
ul#extnav a:visited {
  color: black;
  text-decoration: none;
}

ul#extnav a:hover {
  color: #a51c30;
  text-decoration: underline;
}
ul#extnav .active {  background-color: #f5f5f8;}
ul#extnav .active a:link,
ul#extnav .active a:visited,
ul#extnav .active a:hover,
ul#extnav .active a:active {
  background-color: #f5f5f8;
  color: #a51c30;
  text-decoration: none;
}