html - Make ul items list and wrap to its parent -

so have menu generate php query output looks like:

#ultra-menu {    width: 92%;    background-color: rgba(255, 255, 255, 0.90);    position: absolute;    left: 0px;    right: 0px;    margin: auto;    border-radius: 35px;    max-height: 300px;    padding: 25px;    top: 82px;    z-index: 999999;  }  #ultra-menu h3 {    text-transform: uppercase;    color: #e4810b;    text-align: left;    margin-top: 0px;    padding-top: 0px;  }  #ultra-menu {    color: #28281e;  }  #ultra-menu a:hover {    color: #e4810b;  }  #ultra-menu ul {    margin: 7px;    float: left;  }  .um-cat {    display: none;    text-align: left;  }  #um-fresh {    display: block;  }

<nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation">    <div id="um-fresh" class="um-cat">      <h3><b>freshwater</b></h3>      <ul>        <li class="um-par"><a href="/books-media/"><b>books &amp; media</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-accessories/"><b>fishing accessories</b></a>        </li>        <li class="um-sub"><a href="/fishing-accessories/fishing-nets/">fishing nets</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">fishing tools &amp; accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/rod-accessories/">rod accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">smokers &amp; flasks</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/sunglasses/">sunglasses</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wader-accessories/">wader accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wader-repair/">wader repair</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wading-staffs/">wading staffs</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-clothing/"><b>fishing clothing</b></a>        </li>        <li class="um-sub"><a href="/fishing-clothing/coats-jackets/">coats &amp; jackets</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/gloves/">gloves</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/hats-caps/">hats &amp; caps</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">jackets</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">jumpers &amp; fleeces</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/life-jackets/">life jackets &amp; collars</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/socks/">socks</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">thermals &amp; base layers</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">trousers</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">vests &amp; waistcoats</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/waders-boots/">waders &amp; boots</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/wading-jackets/">wading jackets</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-equipment/"><b>fishing equipment</b></a>        </li>        <li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">backing, nylon &amp; accessories</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-lines/">fly lines</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-reels/">fly reels</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-rods/">fly rods</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">leaders &amp; tippets</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">rod accessories</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/spools/">spools</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/flies-fly-tying/"><b>flies &amp; fly tying</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/gifts-miscellaneous/"><b>gifts &amp; miscellaneous</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/luggage-storage/"><b>luggage &amp; storage</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/spinning/"><b>spinning</b></a>        </li>        <li class="um-sub"><a href="/spinning/braid-line/">braid &amp; line</a>        </li>        <li class="um-sub"><a href="/spinning/spinners/">spinners</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-accessories/">spinning accessories</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-reels/">spinning reels</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-rods/">spinning rods</a>        </li>      </ul>    </div>    </nav>

what trying here make them list left right wrap container image:

so instead of having whitespace under each <ul> other <ul> fit underneath.

i know possible flex box's compatibility don't want them on site.

css use column-count on parent element in case #um-fresh.

then on children want act masonry use display: inline-block;

though technically has same support flex-box's it's easier solution flex box.

flex box compatibility

column count compatibility

a safer conduct might use jsmasonry because of lack of ie9 , 8 support.

though saying put in conditional statement <ie9 , activate jsmasonry not polluting site additional js. way have css version , when user on older browser js masonry still looks right.

also if using modernizr detect if column-count working , if not run jsmasonary.

---

so css column count like:

#ultra-menu {    width: 92%;    background-color: rgba(255, 255, 255, 0.90);    position: absolute;    left: 0px;    right: 0px;    margin: auto;    border-radius: 35px;    max-height: 300px;    padding: 25px;    top: 82px;    z-index: 999999;  }  #ultra-menu h3 {    text-transform: uppercase;    color: #e4810b;    text-align: left;    margin-top: 0px;    padding-top: 0px;  }  #ultra-menu {    color: #28281e;  }  #ultra-menu a:hover {    color: #e4810b;  }  #ultra-menu ul {    margin: 7px;    display: inline-block;  }  .um-cat {    display: none;    text-align: left;  }  #um-fresh {    display: block;    -moz-column-count: 4;    -webkit-column-count: 4;    column-count: 4;  }

<nav id="ultra-menu" class="site-sub-navigation align-center" role="navigation">    <div id="um-fresh" class="um-cat">      <h3><b>freshwater</b></h3>      <ul>        <li class="um-par"><a href="/books-media/"><b>books &amp; media</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-accessories/"><b>fishing accessories</b></a>        </li>        <li class="um-sub"><a href="/fishing-accessories/fishing-nets/">fishing nets</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/fishing-tools-accessories/">fishing tools &amp; accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/rod-accessories/">rod accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/smokers-flasks/">smokers &amp; flasks</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/sunglasses/">sunglasses</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wader-accessories/">wader accessories</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wader-repair/">wader repair</a>        </li>        <li class="um-sub"><a href="/fishing-accessories/wading-staffs/">wading staffs</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-clothing/"><b>fishing clothing</b></a>        </li>        <li class="um-sub"><a href="/fishing-clothing/coats-jackets/">coats &amp; jackets</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/gloves/">gloves</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/hats-caps/">hats &amp; caps</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/freshwater-fishing-clothing-jackets/">jackets</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/jumpers-fleeces/">jumpers &amp; fleeces</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/life-jackets/">life jackets &amp; collars</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/socks/">socks</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/thermals-base-layers/">thermals &amp; base layers</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/trousers-shorts/">trousers</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/vests-waistcoats/">vests &amp; waistcoats</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/waders-boots/">waders &amp; boots</a>        </li>        <li class="um-sub"><a href="/fishing-clothing/wading-jackets/">wading jackets</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/fishing-equipment/"><b>fishing equipment</b></a>        </li>        <li class="um-sub"><a href="/fishing-equipment/backing-nylon-accessories/">backing, nylon &amp; accessories</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-lines/">fly lines</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-reels/">fly reels</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/fly-rods/">fly rods</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/leaders-tippets/">leaders &amp; tippets</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/freshwater-fishing-equipment-rod-accessories/">rod accessories</a>        </li>        <li class="um-sub"><a href="/fishing-equipment/spools/">spools</a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/flies-fly-tying/"><b>flies &amp; fly tying</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/gifts-miscellaneous/"><b>gifts &amp; miscellaneous</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/luggage-storage/"><b>luggage &amp; storage</b></a>        </li>      </ul>      <ul>        <li class="um-par"><a href="/spinning/"><b>spinning</b></a>        </li>        <li class="um-sub"><a href="/spinning/braid-line/">braid &amp; line</a>        </li>        <li class="um-sub"><a href="/spinning/spinners/">spinners</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-accessories/">spinning accessories</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-reels/">spinning reels</a>        </li>        <li class="um-sub"><a href="/spinning/spinning-rods/">spinning rods</a>        </li>      </ul>    </div>    </nav>