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

このコードペンを参照してください

小さい画面では、これにより、ユーザーはすぐに下にスクロールして一番下のエントリに到達する必要が生じます。これは、ホバリングが失われることが多いため、マウスホイールがないと非常に苦痛/不可能になる可能性があります。

一番下に到達する前にエントリが自動的に 2 番目または 3 番目の列にラップされるように CSS を変更する方法はありますか?