How to make a two-level bottom menu on Bitrix?

Question

1C-Bitrix

There was a need to make the usual (in my opinion) two-level bottom menu in the footer. I almost never worked with Bitrix, I found examples on the net, corrected it, but in Bitrix it was not possible to add subelements to the menu. Some sources say that this only works with the left menu. If so, what if I also need it for its intended purpose? Won't two identical menus of the same type on the page conflict, but with different templates?
When switching the menu type to "Left Menu", the output template for "Top Menu" stops displaying elements and what to change there is not yet entirely obvious.

An example output template (in the top menu it displays only 1 level)

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); ?>

<?
$class_root = 'nav-menu collapse';
$class_li = 'nav-menu__item has-dropdown';
?>

<?if (!empty($arResult)): ?>
<ul class="<?=$class_root ?>">
<!-- Sample -->
<!--<li class="<?=$class_li ?>">
     <span class="nav-menu__link">Каталог</span>
     <button class="nav-dropdown__btn"><i class="ti-angle-down"></i></button>
     <div class="nav-dropdown__wrap">
       <ul class="nav-dropdown">
         <li class="nav-menu__item"><a class="nav-menu__link" href="rent.php">Аренда бытовок</a></li>
         <li class="nav-menu__item"><a class="nav-menu__link" href="rent.php">Аренда вагончиков</a></li>
         <li class="nav-menu__item"><a class="nav-menu__link" href="rent.php">Аренда контейнеров</a></li>
         <li class="nav-menu__item"><a class="nav-menu__link" href="rent.php">Аренда модульных зданий</a></li>
        </ul>
      </div>
</li>-->

<? 
  $previousLevel = 0;
  foreach($arResult as $arItem): ?>
  <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
    <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"])); ?>
  <?endif?>

  <?if ($arItem["IS_PARENT"]): //содержит подменю?>

    <?if ($arItem["DEPTH_LEVEL"] == 1): // главное?>
      <li class="<?=$class_li?>">
        <a href="<?=$arItem["LINK"] ?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"] ?></a>
        <span class="nav-menu__link"><?=$arItem["TEXT"] ?></span>
      <ul class="nav-dropdown">
    <?else:?>
      <li<?if ($arItem["SELECTED"]):?> class="<?=$class_li?> item-selected"<?endif?>>
        <a href="<?=$arItem["LINK"] ?>" class="parent"><?=$arItem["TEXT"] ?></a>
        <span class="nav-menu__link"><?=$arItem["TEXT"] ?></span>
      <ul class="nav-dropdown">
    <?endif?>

  <?else: // НЕ содержит подменю?>
    <?if ($arItem["PERMISSION"] > "D"): ?>
      <?if ($arItem["DEPTH_LEVEL"] == 1): // главное меню?>
        <li class="<?=$class_li?>">
          <a href="<?=$arItem["LINK"] ?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"] ?></a>
        </li>
      <?else:?>
        <li<?if ($arItem["SELECTED"]):?> class="<?=$class_li?> item-selected"<?endif?>>
          <a href="<?=$arItem["LINK"] ?>"><?=$arItem["TEXT"] ?></a>
        </li>
      <?endif?>
    <?else: // для пунктов, к которым запрещен доступ?>
      <?if ($arItem["DEPTH_LEVEL"] == 1): //главное меню?>
        <li>
          <a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED") ?>"><?=$arItem["TEXT"] ?></a>
        </li>
      <?else:?>
        <?// выводим пустую ссылку и добавляем класс "denied"?>
        <li>
          <a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED") ?>"><?=$arItem["TEXT"] ?></a>
        </li>
      <?endif?>

    <?endif?>

  <?endif?>

  <?$previousLevel = $arItem["DEPTH_LEVEL"]; // запоминаем уровень вложенности?>

<?endforeach?>

<?if ($previousLevel > 1):?>
  <?=str_repeat("</ul></li>", ($previousLevel - 1)); ?>
<?endif?>

</ul>

<? endif; ?>