Want to make sub-sub menu?

support
1

I want to add sub-sub menu for my website like that


Home
Services

> Digital Marketing
> > On-Page Services
> > Off Page Services

> Content Writing
> > Copywriting
> > Blog post writing

Anyone who can help me with that?? Do I need to add two parents in my menus.toml file?

2

When a post does not appear it means that something you did caused the forum software to queue your post for moderation. Typically this happens when a user types elsewhere and then pastes the text in a forum topic, or if a word, that has attracted spam in the past, is used.

I deleted the previous duplicate post.

3

Anyone who can reply to this!!!

4 
[[menu.main]]
name = "Home"
pageref = "/"
weight = 1

[[menu.main]]
name = "Services"
pageref = "/services"
weight = 2

[[menu.main]]
name = "Digital Marketing"
pageref = "/services/digital-marketing"
parent = "Services"
weight = 1

[[menu.main]]
name = "On-Page Services"
pageref = "/services/digital-marketing/on-page-services"
parent = "Digital Marketing"
weight = 1

[[menu.main]]
name = "Off-Page Services"
pageref = "/services/digital-marketing/off-page-services"
parent = "Digital Marketing"
weight = 2

[[menu.main]]
name = "Content Writing"
pageref = "/services/content-writing"
parent = "Services"
weight = 2

[[menu.main]]
name = "Copywriting"
pageref = "/services/content-writing/copywriting"
parent = "Content Writing"
weight = 1

[[menu.main]]
name = "Blog Post Writing"
pageref = "/services/content-writing/blog-post-writing"
parent = "Content Writing"
weight = 2
5

The above config.toml should work with this menu.html

(I use TailwindCCS and removed most classes)

{{- if .Site.Menus.main }}
<nav class="">
    <ul class="">
        {{- $currentNode := . }}
        {{- range .Site.Menus.main }}
        {{- if .Name }}
        {{- if .HasChildren }}
        <li class="dropdown {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
            <a class="" href="{{ .URL }}">
                {{ .Pre }}
                <span class="">{{ .Name }}</span>
                <label class="" for="{{ .Name }}">⮟</label>
                {{ .Post }}
            </a>
            <ul class="dropdown-content hidden block">
                {{ range .Children }}
                    <li class=" {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
                    <a class="block" href="{{ .URL }}">
                        {{ .Pre }}
                        <span class=" ">{{ .Name }}</span>
                        {{ .Post }}
                    </a>
                    </li>
                {{ end }}
            </ul>
        </li>
        {{- else }}
        <li class=" {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
            <a class="" href="{{ .URL }}">
                {{ .Pre }}
                <span class="">{{ .Name }}</span>
                {{ .Post }}
            </a>
        </li>
        {{- end }}
        {{- end }}
        {{- end }}
    </ul>
</nav>
{{ else -}}
{{- end }}

It needs also this CSS to work:

.dropdown-content {
    position: absolute;    
  }

  .dropdown:hover .dropdown-content {
    display: block;
    }