How to sort the menu?

Question

css

The question is how to align the menu. Building fences from JS is not a hunt, I'm looking for a more elegant solution.

There is a menu

There is a noobuser who sits and pushes items from the admin panel there. At the output, we get a conditional "array" of the view menu:

<!-- Первый уровень -->
<ul>
  <li><a href="#">Жирный заголовок</a>
    <!-- второй уровень -->
    <ul>
      <li><a href="#">Дочерний пункт</a></li>
      <li><a href="#">Дочерний пункт</a></li>
      <li><a href="#">Дочерний пункт</a></li>
    </ul>
  </li>
  <li><a href="#">Жирный заголовок</a>
    <ul>
      <li><a href="#">Дочерний пункт</a></li>
      <li><a href="#">Дочерний пункт</a></li>
      <li><a href="#">Дочерний пункт</a></li>
    </ul>
  </li>
</ul>

Actually the subject is that I want to display the menu more beautifully, an example is the Eldorado website.

However, everything is not so simple there, the output is 3 columns in the form of 3 UL elements. How they are so shamanistic to sort the menu in this way is not entirely clear to me (I suspect manual work or very complex scripts).

The only question is, is it possible to make the same menu in some elegant and simple way, without gardens, crutches and other slag?

If not, just tell us your point of view and the algorithm, how you would do it (you don’t have to write the code for me).
PS The menu can be twisted as you like, it will not be difficult to rewrite the menu display algorithm.
Grateful for any help!

Answer 1

masonry ?