Breaking undordered list after 10 elements in next column

Question

i have one problem with html/css where i cant't find possible solution with css, maybe i am wrong so please help me if there is a solution.

My problem is that i want to break li elements in next columns after 10 element, so li elements from 1-10 will be floated left and other elements from 11-20 will be floated right. HTML structure is this:

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

Here's the codepen