title: HTML/CSS Navigation active state
body: <p>I'm new to <code>HTML</code> and <code>CSS</code> and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey. </p>
  
  <p>Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the <code>HTML</code>. On index.html nothing should be activated as I wont be using that page later. It's just the standard side.
  For Example then I have Home.html, Contact.html and Forum.hmtl. </p>
  
  <p>If I open Index.html in my browser and in my Navbar click on Home I will be navigated to the at the moment exact same page like Index.html, but on this page i want the home navfield to be highlighted. Do I have to (in the Home.html) state that this field is active? How do I do that.</p>
  
  <p>NAV: (in home.html currently the same as in index.html) </p>
  
  <pre><code>&lt;ul id="Navigation"&gt;
          &lt;li&gt;&lt;a href="home.html"&gt;IC Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="forum.html"&gt;IC Forum&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact.html"&gt;IC Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Do I have to put something which states that <code>&lt;li&gt;&lt;a href="home.html"&gt;IC HOME&lt;/a&gt;&lt;/li&gt;</code> is active?</p>
  
  <p>This is how I did the hover effect in my css file:</p>
  
  <pre><code>ul#Navigation a:hover, ul#Navigation span 
  {
      border-color: white;
      border-left-color: black; border-top-color: black;
      color: white; background-color: #adadad;
  }
  </code></pre>
  
  <p>and I thought i could just do the same for active:</p>
  
  <pre><code>ul#Navigation a:active, ul#Navigation span 
  {
  border-color: white;
  border-left-color: black; border-top-color: black;
  color: white; background-color: #adadad;
  }
  </code></pre>
  
  <p>I'd really appreciate some help as I'm still new to this.</p>