在下一栏中的10个元素之后打破无序列表

Question

我对html / css有一个问题，我无法找到css的可能解决方案，也许我错了所以如果有解决方案请帮助我。

我的问题是我希望在10个元素之后的下一列中打破li元素，因此1-10中的li元素将向左浮动，而11-20中的其他元素将向右浮动。 HTML结构是这样的：

<nav class="menu">
  <ul>
    <li>Menu</li>
    <li>Menu
      <ul class="submenu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
      </ul>
    </li>
  </ul>
</nav>

这里是codepen