title: HTML + CSS navigation bar highlighting current page
body: <p>So I have been working on a website and now want to have the navigation bar highlight the current page you are on, I tried searching the site for answered questions but they all had very different looking code from mine so I thought I'd ask.</p>
  
  <p>Right now I have a class formatting a list and tried to add a class for the homepage list item:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="services.html"&gt;Services&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="jobs.html"&gt;Jobs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="feedback.html"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;placeholder&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css part looks like this:</p>
  
  <pre><code>.menu
  {
  background-color: #91BD4A;
  padding: 0;
  margin: 0;
  }
  .menu ul 
  {
  margin:0;
  padding:0;
  overflow: hidden;
  text-align: center;
  font-size:0;
  }
  
  .menu li 
  {
  display: inline;
  list-style: none;
  }
  .menu a:link, a:visited 
  {
  display: inline-block;
  margin-right: -6px;
  width: 140.7px;
  color: #000 !important;
  font-family: Verdana, sans-serif;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  background-color: #91BD4A !important;
  }
  
  .menu a:hover, a:active
  {
  text-decoration: underline;
  background-color: #91BD4A;
  }
  .active, a.active
  {
  color: #FFFFFF;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kubynsu3/" rel="nofollow">Fiddle</a><br>
  Here I tried to add a class for the first list item the home page but it does not make a difference, is there a way to do this without altering my code a lot`?</p>