title: superfish dropdowns to be columned when there are many children and no "grandchildren" nodes
body: <p>I have a horizontal nav menu that's using jquery superfish. In one of my dropdown menus there'll be no more dropdowns within it (i.e. no grandchildren nodes) but there are several children (45 to be exact right now and it may go up or down in time). I'm trying to find a way to have the dropdown be columned past a certain count. 15 works for me nicely since there are 45. So without showing all the includes here's the html list - and for the sake of less code I'll use 15:</p>
  
  <pre><code>&lt;ul class="sf-menu sf-js-enabled sf-shadow" id="menu-1"&gt;
    &lt;li class="current"&gt; &lt;a href="#a" class="sf-with-ul"&gt;menu item&lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;&lt;/a&gt;
      &lt;ul style="display: none; visibility: hidden;"&gt;
        &lt;li&gt; &lt;a href="#aa"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ab"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ad"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#aa"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ab"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ad"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#aa"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ab"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ac"&gt;menu item&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#ad"&gt;menu item&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt;menu item&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt;menu item&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt;menu item&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>so if I wanted the columns to start at 5 I'd have exactly 3 columns. I can't figure out how I can accomplish this and not break everything. I've tried using some css and came up with no solutions. </p>