jquery dynamic dropdown menu - appending issue
<p>I am making a dynamic drop down using JSON info.  Basically it works, but I can't append the sub menu with the parent.  Can anyone give a good suggestion?</p>

<p>json:</p>

<pre><code> "navigation":[
      {
         "title":"Home",
         "link":"index.html"
      },
      {
         "title":"Products",
         "link":"product.html",
         "subnav":[
            {
               "title":"Webapps",
               "link":"products/webapps.html"
            },
            {
               "title":"Mobile Apps",
               "link":"products/mobile-apps.html"
            }
         ]
      }
   ]
</code></pre>

<p>my function :</p>

<pre><code>var naviHandler = function (navi) {
    var localNaviData = navi, ul = '&lt;ul&gt;',naviLink="";
    $.map(localNaviData, function (val,i) {
        naviLink +='&lt;li&gt;'
        if(val.subnav){
            naviLink += naviHandler(val.subnav)
        }else{
            naviLink +='&lt;a href='+val.link+'&gt;'+val.title+'&lt;/a&gt;'
        }

    })

    naviLink +='&lt;/li&gt;&lt;/ul&gt;';
    $('header').find('nav').append(naviLink);
    }

naviHandler(localData[obj]);
</code></pre>
