Edit in JSFiddle

$(document).ready(function () {
        var arr = [
              { MenuName: 'Home' },{
                  MenuName: 'about us',
                  SubMenu: [
                      { MenuName: 'Address' },
                      { MenuName : 'Mail Id'}
                  ]
              }, { MenuName: 'services' },{ MenuName:'contact us'}];

        var i;
        for (i = 0; i < arr.length; i++) {
            var list = $("<li>" + arr[i].MenuName + "</li>").appendTo("#menu");
            if (arr[i].SubMenu) {
                var ul = $("<ul></ul>");
                for (var j = 0; j < arr[i].SubMenu.length; j++) {
                    $("<li>"+ arr[i].SubMenu[j].MenuName +"</li>").appendTo(ul);
                }
                ul.appendTo(list);
            }
        }
        $("#menu").menu();
    });

<div id="menu"></div>

.ui-menu { width: 200px; }
.ui-widget-header { padding: 0.2em; }