title: Active Nav Bar Menu Item CSS3 /HTML5
body: <p>I currently have this:</p>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(document).ready( function(){
      var thispage = location.pathname.substring(1);
      //document.write(thispage);
      jQuery('#menu li a[href~="'+ thispage + '"]') // ~= is contains. Tweak as needed.
      .addClass('active');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li.active {
      background-color: yellow;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="topNav"&gt;
      &lt;ul id="menu"&gt;
        &lt;li&gt;&lt;a href="&lt;?=HOST?&gt;/index.php" title="Home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&lt;?=HOST?&gt;/about-us/" title="About Us"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&lt;?=HOST?&gt;/technology/" title=" Technology"&gt; TECHNOLOGY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&lt;?=HOST?&gt;/careers/" title="Careers"&gt;CAREERS&lt;/a&gt;
        &lt;li&gt;&lt;a href="&lt;?=HOST?&gt;/blogs/" title="Blogs"&gt;BLOG&lt;/a&gt;
          &lt;!--&lt;ul&gt;                    
              &lt;li style="background-color:#898486;"&gt;&lt;a href="&lt;?=SEEKER_HOST?&gt;/opportunities" title="Current Opportunities"&gt;OPPORTUNITIES&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;--&gt;
        &lt;li class="last"&gt;&lt;a href="&lt;?=SEEKER_HOST?&gt;/contact/index.php" title="Contact Us"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My goal is to each menu item to shade a different color when the page is active.  I have tried numerous ways to fix this but I am unable to get this to work.  in my CSS i even have an element item for :focus, but it only works when the href="#" and not with my current setup.  What am I doing wrong here?</p>