0

我有一个基于 pureCss 的下拉菜单。此菜单可以包含 20 个或更多条目：

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Menu</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>

        [... many more entries ...]

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Entry</a></li>
      </ul>
    </li>
  </ul>
</div>

看到这个代码笔

在较小的屏幕上，这很快导致用户需要向下滚动才能到达底部条目 - 如果没有鼠标滚轮，这可能真的很痛苦/不可能，因为悬停经常会丢失。

有没有办法修改 CSS，以便在到达底部之前将条目自动包装到第二列甚至第三列？

4

0 回答 0