Mega Menu

Mega menu using flexbox with dynamic content.

HTML

<ul class="mega-menu">
  <li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>    
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>    
  </li>

  <li>
    <a class="title">Topics</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>    
  </li>

  <li>
    <a class="title">Shows</a>
    <ul>
      <li>CBS</li>
      <li>NBC</li>
    </ul>    
  </li>

  <li>
    <a class="title">Networks</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
      <li>CNN</li>
    </ul>    
  </li>

  <li>
    <a class="title">Groups</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>    
  </li>
  
    <li>
    <a class="title">Sections</a>
    <ul>
      <li>Top Stories</li>
      <li>Trending Stories</li>
      <li>Sports</li>
      <li>U.S.</li>
      <li>Global</li>
    </ul>    
  </li>

  <li>
    <a class="title">Pilots</a>
    <ul>
      <li>HBO</li>
      <li>CBS</li>
      <li>NBC</li>
    </ul>    
  </li>
  
  <li>
    <a class="title">Locations</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>    
  </li>
  
   <li>
    <a class="title">Cities</a>
    <ul>
      <li>Denver</li>
      <li>Baltimore</li>
      <li>LA</li>
      <li>New York</li>
      <li>San Francisco</li>
      <li>New Orleans</li>
      <li>Jacksonville</li>
      <li>Calvery</li>
      <li>August</li>
    </ul>    
  </li>

<li>
    <a class="title">News</a>
    <ul>
      <li>Top Stories</li>
     ...

CSS

*{
  padding: 0; margin: 0;
}
body{
  background: #ccc;
  font-family: helvetica, arial;
  color: #444;
}
ul {
    list-style: none;
}
.mega-menu {
//  display: flex;
//  flex-direction: column;
//  flex-wrap: wrap;
-webkit-column-count:1;
-moz-column-count:1;
column-count:1;
  padding: 15px 15px 0;
//  height: 50vh;
  background: #fff;
}
@media (min-width: 200px) {.mega-menu{-webkit-column-count:2;-moz-column-count:2;column-count:2;}}
@media (min-width: 300px) {.mega-menu{-webkit-column-count:3;-moz-column-count:3;column-count:3;}}
@media (min-width: 400px) {.mega-menu{-webkit-column-count:4;-moz-column-count:4;column-count:4;}}
@media (min-width: 500px) {.mega-menu{-webkit-column-count:5;-moz-column-count:5;column-count:5;}}
@media (min-width: 600px) {.mega-menu{-webkit-column-count:6;-moz-column-count:6;column-count:6;}}
@media (min-width: 700px) {.mega-menu{-webkit-column-count:7;-moz-column-count:7;column-count:7;}}
@media (min-width: 800px) {.mega-menu{-webkit-column-count:8;-moz-column-count:8;column-count:8;}}
@media (min-width: 900px) {.mega-menu{-webkit-column-count:9;-moz-column-count:9;column-count:9;}}
@media (min-width: 1000px) {.mega-menu{-webkit-column-count:10;-moz-column-count:10;column-count:10;}}
@media (min-width: 1100px) {.mega-menu{-webkit-column-count:11;-moz-column-count:11;column-count:11;}}
@media (min-width: 1200px) {.mega-menu{-webkit-column-count:12;-moz-column-count:12;column-count:12;}}
@media (min-width: 1300px) {.mega-menu{-webkit-column-count:13;-moz-column-count:13;column-count:13;}}
@media (min-width: 1400px) {.mega-menu{-webkit-column-count:14;-moz-column-count:14;column-count:14;}}
@media (min-width: 1500px) {.mega-menu{-webkit-column-count:15;-moz-column-count:15;column-count:15;}}
@media (min-width: 1600px) {.mega-menu{-webkit-column-count:16;-moz-column-count:16;column-count:16;}}
@media (min-width: 1700px) {.mega-menu{-webkit-column-count:17;-moz-column-count:17;column-count:17;}}
@media (min-width: 1800px)...