BITRIX: why does it move when setting the menu nesting level = 3?

Question

1C-Bitrix

People! Such a problem. Syntegrated the top menu.
At first everything was OK:

Initially, the task was to make the nesting level = 2.
Then it was: make the nesting level = 3.
I made the nesting level = 3 - and everything started working for me ...

Tell me, please, what can be with the menu, ?
Here is the template source code:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
 
<!--<pre><?print_r($arResult);?></pre>--> 
 
<?if (!empty($arResult)):?> 
 
        <nav class="nav"> 
            <div class="inner-wrap"> 
                <div class="menu-block popup-wrap"> 
                    <a href="" class="btn-menu btn-toggle"></a> 
                    <div class="menu popup-block"> 
                        <ul class=""> 
                            <li class="main-page"><a href="/">Главная</a> 
                            </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><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> 
                <ul> 
                <?if (isset($arItem['PARAMS']['TEXTTT'])):?> 
<div class="menu-text"><?Echo $arItem['PARAMS']['TEXTTT'];?></div> 
<?endif;?> 
        <?else:?> 
            <li<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> 
                <ul> 
        <?endif?> 
 
    <?else:?> 
 
        <?if ($arItem["PERMISSION"] > "D"):?> 
 
            <?if ($arItem["DEPTH_LEVEL"] == 1):?> 
                <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="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:?> 
                <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)://close last item tags?> 
    <?=str_repeat("</ul></li>", ($previousLevel-1) );?> 
<?endif?> 
 
</ul> 
 
</ul> 
 
</ul> 
                        <a href="" class="btn-close"></a> 
                    </div> 
                    <div class="menu-overlay"></div> 
                </div> 
            </div> 
        </nav> 
        <!-- /nav --> 
 
<?endif?>