title: How to change the color of the active link in the menu
body: <p>Here is the menu html code for the nav bar: </p>
  
  <pre><code>&lt;nav&gt;
          &lt;div id="menu"&gt;
          &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="inf.html"&gt;Information&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="photo.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="links.html"&gt;Useful Links&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and here's the code for css : </p>
  
  <pre><code> nav{
  float: left;
  margin-top: 15px;
  }
  
  nav ul {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
  
  }
  
  nav li {
  display: inline-block;
  
  }
  
  nav a {
  padding: 8px 0px;
  margin-right:71px;
  color: #ffffff;
  display: block;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 13px;
  }
  
  nav a:hover {
  color: #cccccc;
  }
  </code></pre>
  
  <p>So for example, if I am currently looking at history page, the text "History" in the navbar will be red. How can I do such a thing?</p>
  
  <p>@edit: As stated in a comment, I am trying to avoid jquery.</p>