title: Navigation Bar setting an Active Tab when user on page?
body: <p>I implemented this Navigation Bar, quite complex coding for me, but i did it and styled it and took care of everything. I just didn't manage to set an Active state on tabs when a user lands on that tab's page. For example, if i have a "Funny" tab, and the user clicks on it, i want it to change color/background while the user is on that page...</p>
  
  <p>I tried solving this myself before bothering anybody with it, but i failed to get it done.</p>
  
  <p>Here are my codes:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
    &lt;ul class="level1"&gt;
  
      **&lt;li class="level1-li"&gt;&lt;a class="level1-a" href="#url"&gt;Home&lt;/a&gt;&lt;/li&gt;**
  
      **&lt;li class="level1-li"&gt;&lt;a class="level1-a fly" href="#url"&gt;Contact Us&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;**
  
  &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Email&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Telephone&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Online Form&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Snail Mail Address&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
  
      **&lt;li class="level1-li"&gt;&lt;a class="level1-a fly" href="#url"&gt;Resort&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;**
  &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level2"&gt;
      &lt;li&gt;&lt;a href="#url"&gt;Ski Hire Facilities&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="fly" href="#url"&gt;Main Ski Slopes&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
     &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level3"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Beginners Slopes&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Intermediate Slopes&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="fly" href="#url"&gt;Advanced Skill Levels&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
     &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level4"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Local&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Nearby&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;With instructor&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Snow boarding&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#url"&gt;Expert&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#url"&gt;Night Life&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="fly" href="#url"&gt;Restaurants&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
      &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level3"&gt;
      &lt;li&gt;&lt;a href="#url"&gt;Snow Hotel&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;The Snowman&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Ice Cavern&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Ski Inn&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="fly" href="#url"&gt;Car Hire&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
       &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level3"&gt;
      &lt;li&gt;&lt;a href="#url"&gt;From Airport&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;In Resort&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Multiple Resorts&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
  
      **&lt;li class="level1-li"&gt;&lt;a class="level1-a fly" href="#url"&gt;Surrounding Area&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;**
  &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Where to go&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;What to do&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Places of interest&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;National parks &amp;amp; Museums&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
  
      **&lt;li class="level1-li left"&gt;&lt;a class="level1-a fly" href="#url"&gt;Information&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;**
  &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level2"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Money Exchange&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="fly" href="#url"&gt;Resort Essential Information&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
     &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level3"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Lift Passes&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Insurance&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="fly" href="#url"&gt;Gear Rental&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
     &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level4"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Boots&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Skis&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Ski Wear&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Goggles&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Ski Schools&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Snow Report&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="fly" href="#url"&gt;Language&lt;!--[if gte IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;
     &lt;!--[if lte IE 6]&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;![endif]--&gt;
    &lt;ul class="level3"&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Austrian&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;German&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;French&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;English&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Short Breaks&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;!--[if lte IE 6]&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/a&gt;&lt;![endif]--&gt;&lt;/li&gt;
  
      **&lt;li class="level1-li"&gt;&lt;a class="level1-a" href="#url"&gt;Privacy&lt;/a&gt;&lt;/li&gt;**
  
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* ================================================================
    This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
    Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
    =================================================================== */
    #menu {width:740px; background: #3aa3d3; height:25px; text-align:center; position:relative; z-index:20;}
    #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
    #menu ul {display:inline-block;}
    #menu li {margin:0; padding:0; list-style:none;}
    #menu li {clear:both;float:none;}
    #menu ul ul {position:absolute; left:-9999px;}
    #menu ul.level1 {margin:0 auto;}
    #menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
    #menu ul.level1 {background:#3aa3d3;}
    #menu ul.level2 {background:#ae4621;}
    #menu ul.level3 {background:#c98b14;}
    #menu ul.level4 {background:#9f690e;}
    #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
    #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
    #menu ul.level1 li.level1-li a.level1-a {float:left;}
    #menu ul li:hover &gt; ul {visibility:visible; left:0; top:25px;}
    #menu ul ul li:hover &gt; ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
    #menu li.left:hover &gt; ul {visibility:visible; left:auto; right:0; top:25px;}
    #menu li.left ul li:hover &gt; ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
    #menu a:hover ul {left:0; top:23px;}
    #menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
    #menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
    #menu a:hover a:hover ul,
    #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
    #menu li.left a:hover a:hover ul,
    #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
    #menu a:hover ul ul,
    #menu a:hover a:hover ul ul {left:-9999px;}
    #menu li.left a:hover ul ul,
    #menu li.left a:hover a:hover ul ul {left:-9999px;}
    #menu li a.fly {font-variant: small-caps;}
    #menu li.left ul a.fly {font-variant: small-caps;}
    #menu li a:hover,
    #menu li a.fly:hover {background-color:#555555;}
    #menu li:hover &gt; a,
    #menu ul li:hover &gt; a.fly {background-color:#555555;}
    #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
    #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
    #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
    #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
    #menu ul, .tabs-outer {overflow:visible;}
    #menu li a {border: none;}
    .main-outer {z-index:10;}/*for IE*/
    .tabs-outer {z-index:11;}/*for IE*/
  </code></pre>
  
  <p>Hope somebody can help. :)</p>