Split UL in to two columns, but don't break nested ULs

Question

I am trying to break a UL with nested UL in the LI in to two columns and while I have been able to use

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

but the nested UL's are getting broken (some in column 1 and some in column 2 depending on where the break is) and I would like to keep them together. If you look in the screenshot below you can see 'Planning and Zoning' is at the bottom and I would like to have it at the top of the next column if possible. The UL that I'm using is below. Any idea how to do this with some jQuery or simple css? It's a challenge!

Here is my code:

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

Lynel Hudson · Accepted Answer · 2020-12-21T00:15:48.750

You could utilize the break-inside/page-break-inside CSS property to avoid the column breaking in the middle of an li element. Both properties do the same thing but they're used in tandem here for wider browser compatibility.

body {
  background-color: #777;
}
.mega-menu {
  column-count: 2;
}
ul {
  margin-top: 0;
}
li {
  list-style-type: none;
}
li a {
  color: #9d9;
  text-decoration: none;
}
li li a {
  color: #fff;
}
li {
  page-break-inside: avoid;
  break-inside: avoid-column;
}

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

This is awesome, @dev sandbox and exactly what I needed. I just learned something new. Thanks for the help! — blair260, Dec 21 '20 at 13:31

Split UL in to two columns, but don't break nested ULs

1 Answers1