title: Traversing jQuery object to populate multi-level nav
body: <p>I have the following object which I'm using to populate my navigation bar:</p>
  
  <pre><code>var navLinks = {
      'Products':     ['ProductCategory1', 'ProductCategory2'],
      'Collections':  ['Collection1'],
      'About':        ['AboutSection1', 'AboutSection2']
  };
  </code></pre>
  
  <p>Top level of nav is populated as such:</p>
  
  <pre><code>$.each(navLinks, function(key, value) {
      $('#site-nav').append('&lt;ul class="' + key + ' nav-first-level"&gt;&lt;a href="../' + key + '"&gt;' + key + '&lt;/a&gt;&lt;ul class="nav-second-level"&gt;&lt;/ul&gt;&lt;/ul&gt;');
  });
  </code></pre>
  
  <p>I would like the arrays within each key/value pair to populate a second level of my nav by inserting titles within the <code>&lt;ul class="nav-second-level"&gt;&lt;/ul&gt;</code> element, however not sure of best way to approach this.</p>