title: Using jQuery to add scrolling to a flat UL list
body: <p>I have this UL list:</p>
  
  <pre><code>&lt;ul class="third-level-nav"&gt;
    &lt;li&gt;&lt;a href="/accommodations/Home.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/accommodations/Household-Ordering-Tutorial.aspx"&gt;
         Household Ordering Tutorial
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="/accommodations/List-of-standard-items.aspx"&gt;
         List of standard items
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
       &lt;a href="/accommodations/Costs-of-utilities.aspx"&gt;
        Costs of utilities
       &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It displays like this on the page, as a flat list (LI floated left, list-style:none):</p>
  
  <p><code>Home |  Household Ordering Tutorial  |  List of standard items  |  Costs of utilities</code></p>
  
  <p>The problem is, there could be a dozen or more of these LI items, and they'll wrap to the next line. Is there a way to use jQuery to make the list scrollable? In other words, it would show a <code>&gt;</code> if there are more items, and a <code>&lt;</code> when the user has scrolled some items out of view? It would smoothly scroll left and right. </p>
  
  <p>Thanks.</p>