How to display links in dropdown in two(n)columns?

Question

PHP

There is a project on opencart2 (not mine). It is necessary to make the display of links, if there are more than 10, in 2 columns.

<?php foreach ($categories as $category) { ?>
              <li class="parent dropdown deeper ">
                <a href="<?= $category['href']; ?>" title="<?= $category['name'] ?>">
                  <?= $category['name'] ?>
                </a><?php if (!empty($category['children'])) { ?>
                  <ul class="dropdown-menu">
                    <?php for ($i = 0; $i < count($category['children']);) { ?>
                      <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
                      <?php for (; $i < $j; $i++) { ?>
                        <?php if (isset($category['children'][$i])) { ?>
                          <li>
                            <a href="<?php echo $category['children'][$i]['href']; ?>">
                              <?php echo $category['children'][$i]['name']; ?>
                            </a>
                          </li>
                        <?php }
                      }
                    } ?>
                  </ul>
                <?php } ?>
              <?php } ?>

.dropdown-menu {
  background: #fda14c;
  width:      auto !important;
  border:     none;
  box-shadow: none;
}
.dropdown-menu:before, .dropdown-menu:after {
  display: none !important;
}
.dropdown-menu li {
  width: auto !important;
}
.dropdown-menu li a {
  width:        100% !important;
  text-align:   left;
  padding-left: 10px;
  background:   transparent;
  font-size:    13px;
  font-family:  RR;
  width:        auto;
}
.dropdown-menu li > a:hover {
  background: transparent !important;
}

You can set width for ul and float: left and width/2 for li and solve the problem, but I'm confused by width: auto !important. Is it possible to solve the problem in a different, more beautiful way? Thank you.