title: Horizontal Menu Scrolling
body: <p>I have Menu item from Menu1 to Menu10, but due to space constraint in web page I can't show all the MenuItem. I can show 4 menu item, rest all will be accessible by clicking left and right arrow at the end of menu item. Currently I am showing Menu4 to Menu7.</p>
  
  <p>i.e &lt;- [Menu4][Menu5][Menu6][Menu7] -></p>
  
  <p>So when I click on Left/Right arrow, Menu items will scroll horizontally.
  I tried searching on net, but didn't got any solution.
  here is what I did till now </p>
  
  <p><a href="http://jsfiddle.net/43QFQ/" rel="nofollow">link</a></p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu3&lt;/a&gt;
  &lt;/li&gt; 
  &lt;li&gt;
      &lt;a href="#"&gt;Menu4&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu5&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu6&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu7&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu8&lt;/a&gt;
  &lt;/li&gt; 
  &lt;li&gt;
      &lt;a href="#"&gt;Menu9&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu10&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>Note: I am using bootstrap also,any bootstrap help is appreciated </p>