ipsSideMenu: nested or responsive?

[Sonya*]

I am using UI Widget ipsSideMenu. It seems that I cannot have it nested and responsive at the same time. This is my template:  

<div class='ipsSideMenu' data-ipsSideMenu>
    <h3 class="ipsSideMenu_mainTitle ipsAreaBackground_light ipsType_medium">
        <a href="#" class="ipsPad_double" data-action="openSideMenu">
            <i class="fa fa-bars"></i> &nbsp;Menu Title&nbsp;<i class="fa fa-caret-down"></i>
        </a>
    </h3>
    <ul class="ipsSideMenu_list">
        <li>
            <a href='#' class='ipsSideMenu_item ipsSideMenu_itemActive'>Link #1</a>
        </li>
        <li>
            <a href='#' class='ipsSideMenu_item'>Link #2</a>
        </li>
        <li>
            <a href='#' class='ipsSideMenu_item'>Link #3</a>
            <ul class="ipsSideMenu_list">
                <a href='#' class='ipsSideMenu_item'>Link #3.1</a>
            </ul>
        </li>
    </ul>
</div>

The nested structure is not displayed here, all list items are just below each other without indent. If I delete data-ipsSideMenu in the first line, I can see nice nested structure, but then toggle in responsive mode does not work anymore.

I would like to have both: nested list AND responsive toggle. Do I miss something? 

[Sonya*]

I know 🙃 It was a little bit late. Removing the class from child lists does it 🥴