3-nested Sub Menu

Hi again,

Longtime to continue my development web with grav, now i'm handle again, but i have problem in 3 nested menu, you can try at https://web.persahabatan.co.id/id/beranda when i click FASILITAS & PELAYANAN -> Layanan Unggulan -> Others Menu

but Others menu not show on the right menu, this is my code, im using macros

{% macro nav_loop(page) %}
    {% import _self as macros %}
    {% for p in page.children.visible %}
        {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
        {% if p.children.visible.count > 0 %}
            <li class="dropdown {{ active_page }}">
                <a href="{{ p.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ p.menu }} <span><i class="fa fa-angle-down"></i></span></a>
                <ul class="dropdown-menu multi-level">
                    {{ macros.nav_loop(p) }}
                </ul>
            </li>
        {% else %}
        <li class="{{ active_page }}">
            <a href="{{ p.url }}">{{ p.menu }}</a>
        </li>
    {% endif %}
    {% endfor %}
{% endmacro %}

when i'm inspect element, <li class="dropdown">Others Menu</li> it's must <li class="dropdown-submenu">Others Menu</li>

can someone give me trick to add submenu in <li> class proprty, im try to dump(macros.nav_loop(p)) but i'm confused, it's show null

please someone, direction me. thanks.

I don't see any Others menu - only Sebelum 2021

What are you actually trying to achieve? Why do you need dropdown-submenu specifically? If you want it to expand on the side, you probably could get away with CSS

.dropdown > .multi-level > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    height: fit-content;
}

Yes, i want do with if else condition with {{ macros.nav_loop(p) }} object but, if blaa then dropdown-submenu else dropdown... but when i'm dump, it's null ... or, if i compare empty value, it's all true return..

i will test with your css condition.. thanks btw

i'm using some code from you

.ownmenu .nav .dropdown-menu .multi-level {
  position: absolute;
  top: 0;
  left: 100%;
  height: fit-content;
  display: none !important;
}

.ownmenu .nav .dropdown-menu:hover .multi-level {
  display: block !important;
}

but other menu has open too, where must i put :hover properties i must?

Thanks for you response

But your selector is nothing like in my example. And just a suggestion, never use !important - there's most likely a proper way to define styles without it.

You also didn't reply what you're actually trying to achieve. Do you have an image of the result you're looking for?