title: Manipulate jquery menu on re-size for responsive layout
body: <p>There is simple menu with list itmes. UL LI. width and numbers of LI is dynamic. And there is dropdown kind of thing &quot;more&quot; on hover/click it will show remaining LI , which will not fit available space.</p>
  <p>I tried using jquery while user resize windows from right to left, it will hide the last visible menu item. What is the possible way to do this revers and also add LI in &quot;more&quot; link.</p>
  <p>Tried some option, as width is less when we resize then list item move below and increase height of UL so using this method I am able to hide last visible.
  code</p>
  <p><a href="http://jsbin.com/flexmenu/2/edit" rel="noreferrer">http://jsbin.com/flexmenu/2/edit</a></p>
  <p><strong>Step 1</strong></p>
  <p><img src="https://i.stack.imgur.com/mgY08.jpg" alt="resize of window" /></p>
  <p><strong>Step 2</strong><img src="https://i.stack.imgur.com/GHqh7.jpg" alt="enter image description here" /></p>
  <p><strong>Step 3</strong><img src="https://i.stack.imgur.com/TUlf0.jpg" alt="enter image description here" /></p>
  <p>These steps will be reverse when user re-size (increase the width)</p>
  <p>Markup</p>
  <pre><code>&lt;div class=&quot;twelve columns filter-wrapper&quot;&gt;
      &lt;ul class=&quot;nav-bar-filter&quot; id=&quot;nav-bar-filter&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;All&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Small&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Medium&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Extra large&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Small-1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Medium-1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Extra large text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Large text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Text&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;ul id=&quot;more-nav&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;More &gt; &lt;/a&gt;
      &lt;ul class=&quot;subfilter&quot;&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Text&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
    &lt;/li&gt;    
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Basically this menu will be used for responsive layout menu.Any help in this will be helpful.
  Edit 1: added markup</p>