title: Making scroll buttons for a menu/navigation bar
body: <p>I have a menu with a lot of options, the idea is to use scroll buttons to navigate left or right(just like viewing your playlist on youtube) controlled by JQuery. I need ideas or suggestions on how to make a functional one that will support any new entries without loosing its functionality. 
  Everything i tried so far does work, but doesn't cope with new options or new added links.
  Heres the code and the CSS, any suggestions are more than welcome.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;body&gt;
          &lt;div id="menu-new"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li class="sep"&gt;
                      &lt;a href="/askthewizard/"&gt;Ask The Wizard&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/newreleases/"&gt;New Releases&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/casestudies/"&gt;Case Studies&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="sep"&gt;
                      &lt;a href="/maintenance/"&gt;Maintenance&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/schedule/"&gt;Schedule&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/timeclock/"&gt;Time Clock&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/payroll/"&gt;Payroll&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="sep"&gt;
                      &lt;a href="/humanresources/"&gt;Human Resources&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/application/"&gt;Application&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/other/"&gt;Other&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
  h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,
  sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
  legend, table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0 none;
      font-family: inherit;
      font-size: 100%;
      font-style: inherit;
      font-weight: inherit;
      margin: 0;
      outline: 0 none;
      padding: 0;
      vertical-align: baseline;
  }
  #menu-new {
      overflow: hidden;
      padding: 5px;
      background-color: #9A1C1C;
      border: 1px solid #000000;
      text-align: center;
  }
  #menu-new ul.menu {
      list-style: none outside none;
      width: 960px;
      display: block;
      margin: 0 auto;
  }
  #menu-new ul.menu li:first-child {
      margin: 0;
  }
  #menu-new ul.menu li.sep {
      border-right: 1px solid #000000;
      padding: 0 12px 0 0;
  }
  #menu-new ul.menu li {
      float: left;
      margin: 0 0 0 12px;
  }
  #menu-new ul.menu li a {
      color: #D9D8B5;
      display: block;
      font: bold 11px/30px 'Arial',sans-serif;
      padding: 0 8px;
      text-decoration: none;
      text-shadow: 0 1px 0 #460100;
      text-transform: uppercase;
  }
  a:link, a:visited {
      color: #9A1C1C;
      text-decoration: none;
  }
  a {
      outline: 0 none;
  }
  #menu-new ul.menu li a:hover, #menu-new ul.menu li a.active {
      background-color: #DDDCBE;
      border-radius: 1px 1px 1px 1px;
      box-shadow: 0 0 2px #222222;
      color: #742C2B;
      text-shadow: 0 1px 0 #FFFFFF;
  }
  </code></pre>