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 & PELAYANANLayanan 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?

No it’s not about selector. it’s just object from p.routable, i follow from other threas

Down arrow in main menu only - #5 by pmoreno

and tweak some my marcos

{% macro nav_loop(page) %}
    {% import _self as macros %}
    {% for p in page.children.visible %}
        {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
        {% set route_page = (p.routable and p.children.visible.count > 0) ? '-submenu' : '' %}
        {% set icon_submenu = (p.routable and p.children.visible.count > 0) ? '<span><i class="fa fa-angle-down"></i></span>' : '' %}

        <li class="dropdown{{ route_page }} {{ active_page }}">
            {% if p.children.visible.count > 0 %}
                <a href="{{ p.url }}">{{ p.menu }}</a>
                <ul class="dropdown-menu multi-level">
                    {{ macros.nav_loop(p) }}
                </ul>
            {% else %}
                <a href="{{ p.url }}">
                    {{ p.menu }} {{ icon_submenu }}
                </a>
            {% endif %}
        </li>

    {% endfor %}
{% endmacro %}

i’v just little problem now, <span><i class="fa fa-angle-down"></i></span> not work properly in first submenu, but nots problem.

Thanks karmalakas for your suggestions.