Single Dropdown

{% set dropDownId = heading | lower | replace(" ", "-") %}

<div id="second-level-menu-{{dropDownId}}" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 bg-grey-100 lg:bg-transparent absolute max-lg:translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:-translate-x-2/4 lg:-left-[9999px] lg:w-44 lg:group-hover:left-2/4 lg:focus-within:left-2/4 ">
     <div class="overflow-y-auto lg:overflow-visible h-full">
        <div class="z-20 lg:relative lg:bg-grey-100 lg:shadow-top-light">
            <button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white p-4 flex items-center text-bravo" aria-controls="second-level-menu-{{dropDownId}}" aria-expanded="false" aria-controls="second-level-menu-{{ dropDownId }}">
                <div class="w-4 h-4 mr-4">
                    {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-bravo transform rotate-90' } %}
                </div>
                <span class="hover:underline">
                    Back
                </span>
            </button>
            <div class="px-4 pb-3 font-semibold text-3xl border-b border-grey-500 lg:border-b bg-white text-grey-800 lg:hidden">
                {{ heading }}
            </div>
            <ul class="lg:h-auto lg:group-hover:animate-fadeQuick">
                 {% for item in list %}
                    <li>
                        <a class="text-xl hover:bg-white block px-4 py-2 lg:py-2 lg:text-sm xl:text-base transition-colors ease-in-out duration-200 lg:hover:bg-grey-300" href="{{ item.url | path }}">{{ item.menu_item }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
     </div>
</div>