title: a:active doesn't work yet a:hover functions correctly
body: <p>I'm having trouble with "a:active" not working at all. "a:hover" is working correctly on the other hand.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS Document */
  @charset "utf-8";
  
  /* Main HTML Elements */
  body {
   font-family: "Open Sans";
   font-size: 14px;
   
   background-color: #FFFFFF;
   color: #1B242D;
   
   width: 100%;
   height: 100%;
   
   margin: 0px;
   padding: 0px;
  }
  
  h1 {
   font-size: 26px;
   color: #FFFFFF;
  }
  
  h2 {
   font-size: 20px;
   color: #5EB59C;
  }
  
  h3 {
   font-size: 18px;
   color: #28BDEA;
  }
  
  h4 {
   font-size: 14px;
   color: #00ACDF;
  }
  
  /* Bart Specific */
  #mainContainer {
   position: absolute;
   width: 100%;
   height: 100%;
   
   padding: 0px;
   margin: 0px;
  }
  
  #topContainer {
   position: fixed;
   top: 0px;
   width: 100%;
   height: 150px;
   
   background-color: #1B242D;
   
   z-index: 1;
  }
  
  #topBar {
   position: absolute;
   top: 0px;
   height: 5px;
   width: 100%;
   
   background-color: #00ACDF;
   overflow: hidden;
  }
  
  #headerContainer {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   
   color: #FFFFFF;
  }
  
  #headerArrow {
   position: absolute;
   top: 150px;
   right: 65px;
   width: 0px;
   height: 0px;
   border-left: 80px solid transparent;
   border-right: 80px solid transparent;
   
   border-top: 60px solid #1B242D;
  }
  
  #headerText {
   position: absolute;
   bottom: 0px;
   left: 5px;
  }
  
  #TopNav {
   position: absolute;
   top: 5px;
   right: 35px;
  }
  
  #TopNav ul {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
  }
  
  #TopNav ul li {
   display: inline-block;
  }
  
  #TopNav ul li a {
   display: block;
   padding-left: 10px;
   padding-bottom: 5px;
   padding-right: 10px;
   text-align: center;
   color: #FFFFFF;
   font-size: 16px;
   text-decoration: none;
   
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
  }
  
  /* #TopNav a:link {
   text-decoration: none;
  } */
  
  /* #TopNav a:visited {
   text-decoration: none;
   color: #FFFFFF;
  } */
  
  #TopNav ul li a:hover {
   text-decoration: none;
   font-weight: !important;
   color: #FFFFFF;
   background-color: #28BDEA;
  }
  
  #TopNav ul li a:active {
   text-decoration: none;
   color: #FFFFFF;
   background-color: #00ACDF;
  }
  
  #midContainer {
   position: absolute;
   top: 160px;
   padding: 0px;
   margin: 0px;
   
   width: 100%;
  }
  
  #mainContent {
   position: absolute;
   width: auto;
   right: 305px;
   left: 10px;
   
   padding-bottom: 10px;
  }
  
  #contentSeparator {
   position: fixed;
   width: 1px;
   height: 80%;
   right: 295px;
   background-color: #8D9299;
  }
  
  #newsContainer {
   position: absolute;
   top: 50px;
   right: 25px;
   max-width: 250px;
   min-width: 250px;
   text-align: center;
  }
  
  #bottomContainer {
   position: fixed;
   bottom: 0px;
   
   background-color: #8D9299;
   width: 100%;
   height: 25px;
   
   color: #FFFFFF;
   
   text-align: center;
  }
  
  #footerContent {
   position: absolute;
   top: 3px;
   width: 100%;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen and (max-width: 801px)" href="/css/p_mobile.css"&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="/css/p_def.css"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="/inc/fontawesome/css/font-awesome.min.css"&gt;
  &lt;script src="/inc/js/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="/inc/js/webfont.js"&gt;&lt;/script&gt;
  
  
  &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="mainContainer"&gt;
   &lt;div id="topContainer"&gt;
    &lt;div id="topBar"&gt;&lt;/div&gt;
       &lt;div id="headerContainer"&gt;
        &lt;div id="headerArrow"&gt;&lt;/div&gt;
           &lt;div id="headerText"&gt;&lt;h1&gt;Page Title Here&lt;/h1&gt;&lt;h4&gt;...a very warm welcome to my personal portfolio website.&lt;/h4&gt;&lt;/div&gt;
           &lt;div id="TopNav"&gt;
               &lt;ul&gt;
                &lt;li&gt;&lt;a href="/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/mywork.html"&gt;My Work&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/aboutme.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/contactme.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/docs/index.html"&gt;Documents&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
              &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
      
      &lt;div id="midContainer"&gt;
       &lt;div id="mainContent"&gt;
            &lt;p&gt;Some Text Here&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="contentSeparator"&gt;&lt;/div&gt;
          &lt;div id="newsContainer"&gt;
           &lt;div id="news_1"&gt;
               &lt;p&gt;Some news here...&lt;/p&gt;
                  &lt;hr&gt;
                  &lt;p&gt;Some more news here...&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div id="bottomContainer"&gt;
       &lt;div id="footerContent"&gt;
           Copyright Notice Here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried many times to fix this but it just won't work. 
  I have used this before and I set it up identically and it worked fine over there, but for some reason not here. Any clues?</p>
  
  <p>Thanks!</p>
  
  <p>MODIFICATION: I have now added full page CSS and HTML if this may help in solving of the problem. Thanks for your help!</p>