title: Two level horizontal menu highlighting current page
body: <p>I've made a two level menu using CSS and HTML (ul's etc). What I want is the top level to be selected (using the 'selected' class) and the item in the second level that corresponds to the current page to have the class 'active' (which is just bold).</p>
  
  <p>EG when the user navigates to '/maintenance/company.aspx', I want the Maintenance menu item to be selected and the "Companies" submenu item to be bold.</p>
  
  <p>The 1st level selection is working and the bold is working, however I cannot get the actual submenu (2nd level) to display. </p>
  
  <p>CSS</p>
  
  <pre><code>#menu
  {
      margin:0;
      padding:0;
      list-style:none;
      position:relative;
      background:url(../images/menubg.gif) repeat-x;
      height:32px;
      text-transform:uppercase;
      font-family: Arial, Helvetica, sans-serif;
  }
  #menu li
  {
      float:left;
      padding:0;
      margin:0;
  }
  #menu a
  {
      text-decoration:none;    
      padding:10px 15px;
      display:block;
      color:#ffffff;
  }
  #menu li:hover a, a.selected
  {
      background:#ffffff;
      color: #666666 !important;
  }
  #menu li span
  {
      float:left;
      padding: 5px 0;
      position:absolute;
      display:none;
      left:0;
      top:31px;
      background:#ffffff;
      color: #000;
      width: 100%;
  }
  #menu li:hover span, .selectedSubMenu { display:block; }
  #menu li span a { display: inline; padding: 5px 15px; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
  #menu li span a:hover {text-decoration: underline;}
  .active { font-weight: bold; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="menu"&gt;            
      &lt;li&gt;&lt;a href="#" id="contracts"&gt;Contracts&lt;/a&gt;
          &lt;span&gt;
              &lt;a href="/contracts/submitcontract.aspx"&gt;New Contract&lt;/a&gt;
              &lt;a href="/contracts/search.aspx"&gt;Find Contract&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="invoicing"&gt;Invoices&lt;/a&gt;
          &lt;span&gt;
              &lt;a href="/invoicing/invoicerun.aspx"&gt;Invoices Run&lt;/a&gt;
              &lt;a href="/invoicing/invoicerun.aspx"&gt;Invoicing History&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="maintenance"&gt;Maintenance&lt;/a&gt;
          &lt;span&gt;
              &lt;a href="/maintenance/account.aspx"&gt;Accounts&lt;/a&gt;
              &lt;a href="/maintenance/agent/search.aspx"&gt;Agents&lt;/a&gt;
              &lt;a href="/maintenance/company.aspx"&gt;Companies&lt;/a&gt;
              &lt;a href="/maintenance/contact.aspx"&gt;Contacts&lt;/a&gt;
              &lt;a href="/maintenance/networks.aspx"&gt;Networks&lt;/a&gt;
              &lt;a href="/maintenance/plans.aspx"&gt;Plans&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="admin"&gt;Control Panel&lt;/a&gt;
          &lt;span&gt;
              &lt;a href="/admin/userlist.aspx"&gt;Users&lt;/a&gt;
              &lt;a href="/admin/systemsettings.aspx"&gt;System Settings&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>function markActiveLink() {
      var path = location.pathname.substring(1);
  
      if (path) {
          $('#menu li &gt; a').each(function() {
              var $category = $(this).attr('id');
              if (path.indexOf($category) &gt; -1) {
                  $(this).addClass('selected');
  
              --&gt;    $(this).siblings('span:first').addClass('selectedSubMenu');
  
                  $('#menu li span a[@href="/' + path + '"]').addClass('active');                        
              }
          });              
      }
  }
  
  $(document).ready(markActiveLink);
  </code></pre>