how to build an ordered list for a menu using JQUERY need help

I want to build this DIV with unordered list using jquery for a menu and the data would be coming from a sharepoint list. I have the main DIV on the area where i want the menu

 <div id="menumain"/>

I have tried doing the below but not too good with JQUERY. I want to append or add the below DIV to the DIV mainmenu element above Any help will be appreciated

$("#menumain").find('div')
    .append($('<u开发者_运维百科l>')
        .append($("<li><a href=>" + $(this).attr("ows_Group") +  "</a></li>")
            .append($('</ul>')
             )
        )
    );



<div id="header">
            <ul id="navbar">

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

                <ul>

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

                    <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>

You can use the following format

$(document).ready(function () {

        var content = "<div style='background-color:black;'><ul id='navBar'><li><a href='#'>menuItem1</a></li></ul></div>";
        $("#mainMenu").append(url);
    });

Just after first Menu item1 you can continue adding other menu items one by one in the same format.

TRY THIS:

$('#menumain').append('<ul></ul>');

$.each(
$('#header .menu li').map(function(e){
    return $(e).attr('ows_Group');
}), function(b) {
    $('#menumain ul').append('<li><a href="#">' + b + '</a></li>');
});