当有很多子代且没有“孙子”时，超级鱼下拉列表将被列在列中。节点

Question

我有一个使用 jquery superfish 的水平导航菜单。在我的一个下拉菜单中，将不再有下拉菜单（即没有孙节点），但有几个子节点（现在准确地说是 45 个，它可能会及时上升或下降）。我正在尝试找到一种方法，使下拉列表的列数超过一定数量。 15 对我来说效果很好，因为有 45 个。因此，在不显示所有包含内容的情况下，这里是 html 列表 - 为了减少代码，我将使用 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>

所以如果我希望列从 5 开始，我将恰好有 3列。我不知道如何才能实现这一目标而不破坏一切。我尝试过使用一些CSS，但没有找到解决方案。

Answer 1

我建议您使用 大型下拉列表 脚本而不是 superfish。

更新：如果你想要一个能够很好地降级的多列下拉菜单，那么为什么不直接选择 CSS 菜单呢？查看多列菜单，专业下拉列表 1, prodropdown 列表 2, CSS3 多幻灯片 甚至是 垂直弹出列表。

---

更新＃3：好吧，由于我的强迫症迫使我弄清楚这一点，所以我今天在这方面工作了一段时间，哈哈。它不是那么漂亮，但它有效。这是演示。

您必须稍微重新格式化 HTML：

<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>

将此 CSS 添加到标准中

.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;
}