[jQuery] Dzielenie ul'a na kilka innych Opcje

[Grafi]

Witam.

Mam taki oto problem:

Wczytuj na stronie menu w postaci:

<ul>
<li></li>
....
....
....
</ul>

Chciałbym stworzyć menu w formie trzech kolumn obok siebie. Na podstawie tej listy która mam, czyli podzielić ją na 3 i na tej podstawie otrzymać ile elementów mam mieć w kolejnych kolumnach. Mając na myśli "kolumne" mówie o osobnej liście ul, czyli mam 21 elementów dziele je na 3, otrzymuj 7 elementów na "kolumne" (ul). Więc powinien mi stworzyć 3 listy ul.

<ul>
<li>1</li>
<li>....</li>
<li>7</li>
</ul>

<ul>
<li>8</li>
<li>....</li>
<li>15</li>
</ul>

<ul>
<li>16</li>
<li>....</li>
<li>21</li>
</ul>

Kod jaki do tej pory udało mi się stworzyć:

Kod

$('.main-menu ul').each(function () {
      $(this).find('ul').each(function(i, list){
          var $list = $(list),
              items = $list.children('li');
              length = Math.ceil(items.length/3);

                items.each(function(i){
                    if ( i % length === 0)
                    {
                    var newList = $('<ul></ul>').insertAfter($list).append(items.slice(lenght))
                        newList.width();
                        console.log('dzieli');
                    }
                    console.log(i);
                });
      });
    });

Niestety tworzy mi tylko 2 kolumny, w 1 mam odpowiednia ilość elementów natomiast do drugiej wrzuca mi resztę.
Gdzie popełniam błąd bo nie mogę go znaleźć.