superfish dropdowns to be columned when there are many children and no “grandchildren” nodes

Question

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:

<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-1">
  <li class="current"> <a href="#a" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a>
    <ul style="display: none; visibility: hidden;">
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
    </ul>
  </li>
  <li> <a href="#">menu item</a> </li>
  <li> <a href="#">menu item</a> </li>
  <li> <a href="#">menu item</a> </li>
</ul>

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.

Answer 1

I would suggest that you use a mega dropdown script instead of superfish if you have 45 items in the list.

Update: If you want a multi-column dropdown menu that degrades nicely, then why not just go for a CSS menu? Check out multi-column menu, pro dropdownlist 1, prodropdown list 2, CSS3 multi-slide or even a vertical flyout list.

---

Update #3: Ok, since my OCD compelled me to figure this out, I worked on this for a while today LOL. It's not that pretty, but it works. Here is a demo.

You'll have to reformat the HTML a tiny bit:

<ul class="sf-menu">
 <li>
  <a href="#a">menu item</a>
  <div class="listwrap">
   <div class="listblock">
    <ul>
     <li><a href="#">menu item</a></li>
     ...
     <li><a href="#">menu item</a></li>
    </ul>
   </div>
   <div class="listblock">
    <ul>
     <li><a href="#">menu item</a></li>
     ...
     <li><a href="#">menu item</a></li>
    </ul>
   </div>
  </div>
 </li>
</ul>

Added this CSS to the standard

.sf-menu .listwrap {
 position: absolute;
 top: -999em;
 max-height: 500px;  /* adjust height as desired */
 width: 45em;        /* adjust width as more columns are added (~10em per column + shadow width */
}
.sf-menu .listblock ul {
 position: relative;
 display: block;
 float: left;
 width: 10em;
}
.sf-menu li:hover ul,
.sf-menu li:hover .listwrap,    /* added two definitions to existing one */
.sf-menu li.sfHover .listwrap,
.sf-menu li.sfHover ul {
 left: 0;
 top: 2.5em; /* match top ul list item height */
 z-index: 99;
}
.sf-menu li:hover .listblock ul,
.sf-menu li.sfHover .listblock ul {
 top: 0;
 left: 0;
}