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

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

In style element (<style type="text/css">) within head element:

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

<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>

In head element:

<link rel="stylesheet" type="text/css" 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-block;
  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;
}