PureCSS中的多列下拉菜单

Question

我有一个基于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>

请参阅this codepen

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

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