Разделите UL на два столбца, но не разбивайте вложенные UL.

Я пытаюсь разбить UL с вложенным UL в LI на два столбца, и хотя мне удалось использовать

.grid-list {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 3;
}

Но вложенные UL ломаются (некоторые в столбце 1 и некоторые в столбце 2 в зависимости от того, где разрыв), и я хотел бы сохранить их вместе. Если вы посмотрите на скриншот ниже, вы увидите, что «Планирование и зонирование» находится внизу, и я хотел бы, чтобы он был вверху следующего столбца, если это возможно. UL, который я использую, приведен ниже. Есть идеи, как это сделать с помощью jQuery или простого CSS? Это вызов!

Вот мой код:

<div class = "mega-menu">
   <ul class = "sub-nav">
      <li>
         <a href = "#" id = "Village Council" target = "">Village Council</a>
         <ul>
            <li>
               <a href = "#" id = "Agendas &amp; Minutes" target = "">Agendas &amp; Minutes</a>
            </li>
         </ul>
      </li>
      <li>
         <a href = "#" id = "Boards" target = "">Boards</a>
         <ul>
            <li>
               <a href = "#" id = "Planning Board" target = "">Planning Board</a>
            </li>
            <li>
               <a href = "#" id = "Board of Adjustment" target = "">Board of Adjustment</a>
            </li>
            <li>
               <a href = "#" id = "Parks, Recreation, and Greenways Board" target = "">Parks, Recreation, and Greenways Board</a>
            </li>
            <li>
               <a href = "#" id = "Committees" target = "">Committees</a>
            </li>
         </ul>
      </li>
      <li>
         <a href = "#" id = "Ordinances" target = "">Ordinances</a>
      </li>
      <li>
         <a href = "#" id = "Finance &amp; Tax" target = "">Finance &amp; Tax</a>
         <ul>
            <li>
               <a href = "#" id = "Budgets &amp; Reports" target = "">Budgets &amp; Reports</a>
            </li>
            <li>
               <a href = "#" id = "Taxes" target = "">Taxes</a>
            </li>
            <li>
               <a href = "#" id = "Contact Finance" target = "">Contact Finance</a>
            </li>
         </ul>
      </li>
      <li>
         <a href = "#" id = "Planning &amp; Zoning" target = "">Planning &amp; Zoning</a>
         <ul>
            <li>
               <a href = "#" id = "Maps" target = "">Maps</a>
            </li>
            <li>
               <a href = "#" id = "Land Use" target = "">Land Use</a>
            </li>
            <li>
               <a href = "#" id = "Permitting" target = "">Permitting</a>
            </li>
            <li>
               <a href = "#" id = "Ordinances" target = "">Ordinances</a>
            </li>
            <li>
               <a href = "#" id = "Projects" target = "">Projects</a>
            </li>
         </ul>
      </li>
      <li>
         <a href = "#" id = "Public Safety" target = "">Public Safety</a>
      </li>
      <li>
         <a href = "#" id = "Parks &amp; Recreation" target = "">Parks &amp; Recreation</a>
         <ul>
            <li>
               <a href = "#" id = "Marvin Efird Park" target = "">Marvin Efird Park</a>
            </li>
            <li>
               <a href = "#" id = "Reserve the Barn" target = "">Reserve the Barn</a>
            </li>
            <li>
               <a href = "#" id = "Trails &amp; Greenways" target = "">Trails &amp; Greenways</a>
            </li>
         </ul>
      </li>
      <li>
         <a href = "#" id = "Transportation" target = "">Transportation</a>
      </li>
      <li>
         <a href = "#" id = "Staff Directory" target = "">Staff Directory</a>
      </li>
   </ul>
</div>