<nav class="site">
   <ul>
     <li>
       <a href="#about-us">About Us       </a>
     </li>
     <li>
       <a href="#courses">Courses       </a>
     </li>
     <li>
       <a href="#registration">Registration       </a>
     </li>
     <li>
       <a href="#degrees-certificates">Degrees & Certificates       </a>
     </li>
     <li>
       <a href="#distance-education">Distance Education       </a>
     </li>
     <li>
       <a href="#exams-grades-policies">Exams, Grades, & Policies       </a>
     </li>
     <li>
       <a href="#resources">Resources       </a>
     </li>
     <li>
       <a href="#news-hub">News Hub       </a>
     </li>   </ul> </nav>

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

nav a:link {
          text-decoration: none;
          color: blue;
          background-color: white;
          }
      nav a:visited {
          text-decoration: none;
          color: #66f;            /* lighter blue */
          background-color: #ccc; /* grey */
      }
      nav a:hover {
          text-decoration: none;
          color: white;
          background-color: blue;
      }
      nav a:active {
          text-decoration: underline;
          color: red;
          background-color: yellow;
      }
      /**
        Some tweaks to make the list
          look more like a sidebar
          navigation.  Not important for
          to illustrate the
          a pseudo classes
      */
      nav.site ul { font-family: sans-serif; font-weight: bold; width: 25%; list-style: none;}
      a {margin: 0.25em; padding: 0.25em; display: block;}