title: highlighting the current page in a list of links using css / html
body: <p><em>Edited to include HTML as requested - I have removed the full urls as there is no point posting them anyway as they are on a protected staging server</em></p>
  
  <p>I am trying to amend a friend's website which has been built so that there is a sub menu which appears on every page but is coded only once.  </p>
  
  <p>I want to be able to add a highlight to the link for the page you are currently viewing, but I have to do this all in one html snippet - so the code below preceeds the html list which is used for navigation.</p>
  
  <p>The list renders fine, except that I can't get the current page to highlight (the 'active' tag only highlighting as you click the page).</p>
  
  <p>I have read some other posts about adding 'current link' formatting in a separate file but, unfortunately, I have to include all the code in this snippet.</p>
  
  <p>Given that, is what I am trying to achieve possible?</p>
  
  <p>Thanks</p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
      #navigation {
          color: #ffffff;
          font-family: Sans-Serif;
          height: 34px;
          list-style: none;
          margin: 0;
          padding: 0;
          position: relative;
      }
      #navigation li a {
          color: #000000;
          display: block;
          font-size: 12px;
          font-weight: bold;
          padding: 10px 18px;
          text-decoration: none;
      }
      #navigation li a:hover {
          background-color: #b36521;
          color: #ffffff;
      }
      #navigation li a:active {
          background: #f1d74c;
          color: #ffffff;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="submenu"&gt;
      &lt;h3&gt;Menu&lt;/h3&gt;
      &lt;ul id="navigation"&gt;
  
          &lt;li&gt;&lt;a href="http://URL/SOAP-BARS"&gt;Soap bars&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/LIQUID-SOAP"&gt;Liquid soap&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/BATH-BODY"&gt;Bath and body&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/SKINCARE"&gt;Skincare&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/4573204014/CANDLES"&gt;Candles&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/GIFTS"&gt;Gifts&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/FAVOURS"&gt;Favours&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://URL/BROWSE-BY-SCENT"&gt;Browse by scent&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>