title: Horizontal Drop Down Menu
body: <p>Hi I want to create a html structure like this:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li class="top"&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="button1"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="extend"&gt;
          &lt;a class="button 1"&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class="last"&gt;&lt;a class="button2"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="extend"&gt;
          &lt;a class="button1"&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="button2"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="button3"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last"&gt;&lt;a class="button4"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a class="button1"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="last"&gt;&lt;a class="button2"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>with this code:</p>
  
  <pre><code>$(document).ready(function(){
      var menuArray = [
      {
          'name':'main 1',
          'className':'main_1'
      },{
          'name':'main 2',
          'group':'group1'
      },{
          'name':'main 3',
          'group':'group1',
       },{
          'name':'main 4',
          'group':'group2'
       },{
          'name':'main5',
          'group':'group2'
      },{
          'name':'button'
      }
  ];
  
      var createMenu = function(toolArray){
          var menu = $('&lt;ul class="menu"&gt;&lt;li class="top"&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;').appendTo('body');
          var groupArray = [];
  
          $.each(toolArray, function(index, value){
              var group = value.group || '';
              var name = value.name || '';
              var elementClass = value.className || '';
  
              if(typeof(value.group) === 'undefined'){
                  console.log('crete button - no group');
  
                  var li = $('&lt;li&gt;&lt;a class="'+name+'"&gt;'+name+'&lt;/a&gt;&lt;/li&gt;');
                  li.click(value.onClick);
                  menu.append(li);
              }
              else{
                  if(typeof(groupArray[group]) === 'undefined'){//first element in group
                      console.log('create first element in group '+group);
                      groupArray[group] = 1;
  
                      var li = $('&lt;li class="'+group+'"&gt;&lt;a class="'+elementClass+'"&gt;'+name+'&lt;/a&gt;&lt;/li&gt;');
                      menu.append(li);
                  }
                  else{
                      if(groupArray[group] &gt; 1){//third, ... element in group
                          var li = $('&lt;li&gt;&lt;a class="'+elementClass+'"&gt;'+name+'&lt;/a&gt;&lt;/li&gt;');
                          $('li.'+group+' ul', menu).append(li);
                      }
                      else{//second element in group
                          var li_parent = $('li.'+group, menu).addClass('extend');
                          var ul = $('&lt;ul&gt;&lt;li class="'+group+'"&gt;&lt;a class="'+elementClass+'"&gt;'+name+'&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;');
                          $(ul).append(li_parent);
                      }
  
                      groupArray[value.group] = groupArray[value.group]+1;
                  }
              }
          });
      };
  
      createMenu(menuArray);
      });​
  </code></pre>
  
  <p>The problem is, that the code only shows this:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
     &lt;li class="top"&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="main 1"&gt;main 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="button"&gt;button&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any idea why?
  <a href="http://jsfiddle.net/W4Phv/" rel="nofollow noreferrer">http://jsfiddle.net/W4Phv/</a></p>