building unordred list using j query

building unordred list using j query

 Hi all,
        I want to construct HTML for a menu and i want to use DIV with UL
The data for the link and text would be coming from a web service which is a sharepoint list like so.
As you can see below i want to grab the rows and and it to anchor links...
Any help would be appreciated.

  1.     $(document).ready(function() {
      $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "MenuList",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
        completefunc: function (xData, Status) {
          $(xData.responseXML).find("[nodeName=z:row]").each(function() {
            var liHtml =  $(this).attr("ows_Title") ;
            $("#mainmenu").append(liHtml);
          });
        }
      });
    });

















  1. The desired HTML would look like so
        <div id="mainmenu">
    <div id="header">
                <ul id="navbar">

                <li class="menu"><a href="#">Home</a>

                    <ul>

                        <li><a href="#">liHtml </a></li>
                        <!--I want to keep adding the <li> element with new item-->
                        <li><a href="#">Menu item 2</a></li>

                        <li><a href="#">Menu item 3</a></li>

                        <li><a href="#">Menu item 4</a></li>

                        <li><a href="#">Menu item 5</a></li>

                    </ul>

                </li>

              </ul>

             </div>
    </div>