title: How can i Split Menu Bar in two lines
body: <p>This is my jsfiddle </p>
  
  <p><a href="http://jsfiddle.net/Cs8Uu/1/" rel="nofollow">http://jsfiddle.net/Cs8Uu/1/</a></p>
  
  <p>I have got a Menu as shown in the fiddle 
  Right now the Menu is being shown under one line .</p>
  
  <p>How can i make that display in two lines ??</p>
  
  <p>Means </p>
  
  <pre><code>ONE TWO THREE (First Line )
  FOUR FIVE SIX (In second line )
  </code></pre>
  
  <p>Could anybody please let me know how to do this ??</p>
  
  <p>The above CSS was given two me  </p>
  
  <p>I am using this to append data dynamically to the menu </p>
  
  <pre><code>function createhorizontaltab(categories) {
  var categoryArr = categories;
      for (var i = 0; i &lt; categoryArr[0].length; i++) {
          if (categoryArr[i] != undefined) {
    $("#swiper-wrapper").append('&lt;li id= "' + categoryArr[i] + '" class="swiper-slide"&gt;' + categoryArr[i] + '&lt;/li&gt;');
          }
      }
  }
  
  
  
  
   &lt;section class="menuWrap"&gt;
        &lt;div class="menuInner"&gt;
           &lt;div class="swiper-container"&gt;
              &lt;ul id="swiper-wrapper" class="swiper-wrapper"&gt; 
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/section&gt;
  </code></pre>
  
  <p>Please let me know how can i make Menu Bar dispay in two lines ??</p>
  
  <p>Updated answer</p>
  
  <pre><code> function createhorizontaltab(categories) {
  var categoryArr = categories;
      for (var i = 0; i &lt; categoryArr[0].length; i++) {
          if (categoryArr[i] != undefined) {
              if(i==4)
              {
  $("#swiper-wrapper").append('&lt;/ul&gt;&lt;ul&gt;');
              }
    $("#swiper-wrapper").append('&lt;li id= "' + categoryArr[i] + '" class="swiper-slide"&gt;' + categoryArr[i] + '&lt;/li&gt;');
          }
      }
  }
  </code></pre>
  
  <p>The output HTML that function creates is </p>
  
  <pre><code>&lt;ul id="swiper-wrapper" class="swiper-wrapper" style="width: 0px; height: 30px;"&gt;
     &lt;li id="Chips &amp;amp; Chocolates" class="swiper-slide"&gt;Chips &amp;amp; Chocolates&lt;/li&gt;
     &lt;li id="Ice creams" class="swiper-slide"&gt;Ice creams&lt;/li&gt;
     &lt;li id="Popcorn" class="swiper-slide"&gt;Popcorn&lt;/li&gt;
     &lt;li id="Snacks &amp;amp; Corn" class="swiper-slide"&gt;Snacks &amp;amp; Corn&lt;/li&gt;
     &lt;li id="Soft Drinks" class="swiper-slide"&gt;Soft Drinks&lt;/li&gt;
     &lt;li id="Tea &amp;amp; Coffee" class="swiper-slide"&gt;Tea &amp;amp; Coffee&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>