title: CSS: How to change colour of active navigation page menu
body: <p>I'm trying to change the colour of the active or current page navigation link which is selected by the user on my website. What am I doing wrong? Thanks.</p>
  
  <p>So far the CSS looks like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.menuBar
  {
     font-family: BirchStd;
     font-size: 40px;
     line-height: 40px;
     font-weight: bold;
     text-align: center;
     letter-spacing: -0.1em;
  }
  
  div.menuBar li{list-style:none; display: inline;}
  div.menuBar li a:active{color:#FF0000;}
  div.menuBar ul{margin:0;}
  </code></pre>
  
  <p>And my HTML calls a page template for the navigation menu using the include PHP function:</p>
  
  <pre><code>&lt;div class="menuBar"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="index.php"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="two.php"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="three.php"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="four.php"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="five.php"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p></p>