Recursive menu

Hi guys,
I’m trying to implement 2-level recursive menu: 1st level is dropdown, and the 2nd level should drop to the right.
My current code produces the 2-nd level menu item, but it appears at the bottom of the dropdown items.

CSS for the dropdown items is located in the bootstrap.css. There should be some CSS for the 2nd level items - but it is missing. May be my boostrap.css file lacks some parts? Or should I just create some classes and add them to the style.css?

By the time I get to these recursive elements I’m nearly crazy, so maybe I have some errors there.

Here is the part of my Config.toml:

    [[Languages.en.menu.header]]
      weight = 3
      name = "Desktop"
      url = "/products"
        [[Languages.en.menu.header]]
          parent = "Desktop"
          weight = 1
          name = "Desktop 01"
          url = "/desktop01"
            [[Languages.en.menu.header]]
              parent = "Desktop 01"
              weight = 1
              name = "Desktop 001"
              url = "/desktop001"

Here is my the html:

<header>
  <nav id="navbar" class="navbar navbar-default">
   <div class="container">
   <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{ .Site.BaseURL }}">
          <img src="{{ .Site.BaseURL }}img/logo.png" alt="{{ .Site.Title }} Logo">
        </a>
                      <!-- Language List -->
        <ul class="list-inline lang-list">
          {{ range $.Site.Home.AllTranslations }}
          <li class="list-inline-item"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
          {{ end }}
        </ul>
      </div>


      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">
          <li><a href="{{ .Site.BaseURL }}">{{ .Site.Params.home }}</a></li>

        {{ range .Site.Menus.header }}
           <li>
          {{ if .HasChildren }}
              <a href="{{ .URL }}">{{ .Name }}<span class="caret"></span></a>
            <ul class="dropdown-menu">
              {{ range .Children }}
	            <li>

				         {{ if .HasChildren }}
			              <a href="{{ .URL }}">{{ .Name }}<span class="right-arrow"></span></a>
			            <ul class="dropdown-menu multi-level">
			              {{ range .Children }}
				            <li class="dropdown-submenu"><a href="{{ .URL }}">{{ .Name }}</a></li>
			              {{ end }}
			            </ul>
			            {{ else }}
			            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
			            {{ end  }}

	            </li>
	        </li>
           {{ end }}
         </ul>
          {{ else }}
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
          {{ end  }}
           </li>

        {{ end }}
        </ul>

      </div>
    </div>
  </nav>
</header>

Here is CSS:

header {
  position: sticky;
  z-index: 1030;
  width: 100%;
}

header .navbar {
  margin-bottom: 0px;
  border: 0px;
  background: #1d2024;
  padding: 0;
  position: sticky;
  z-index: 1030;
  width: 100%;

}

header .navbar-brand {
  padding-top: 5px;
}

header .navbar-brand img {
  padding-top: 5px;
}

header .navbar-default {
  background: #1d2024;
  border: 0px;
  position: sticky;
  z-index: 1030;
  width: 100%;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  color: #fff;
  background-color: #1d2024;
}

header .navbar-default .navbar-nav {
  background: #1d2024;
  padding-top: 10px;
}

header .navbar-default .navbar-nav li a {
  color: #707d8f;
  padding: 7px 20px;
  font-family: Montserrat;
  font-size: 16 px;
  text-transform: uppercase;
}
header .navbar-default .navbar-nav li a:hover {
  color: #fff;
  background: #1d2024;
}

header .dropdown-menu {
background-color: #1d2024;
}
.navbar-nav li:hover>.dropdown-menu {
  display: block;
  top: 95%;
  left: 0px;
  z-index: 1030;
  float: left;
  font-size: 15 px;
  min-width: 20rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  text-align: left;
  background-clip: padding-box;
}

/* multilevel */

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Thanks in advance!

Looks like Bootstrap to me. If you use version 4 have a look at my navigation template:

<header id="topnavigation">
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        {{ $currentPage := . }}
        <li class="nav-item">
          <a href="/" class="nav-link">Home</a>
        </li>
        {{ range .Site.Menus.main }}
          {{ if .HasChildren }}
            <li class="nav-item dropdown{{ if $currentPage.HasMenuCurrent "main" . }} active{{ end }}">
              <a class="nav-link dropdown-toggle" href="" id="{{ .Title }}-dropdown" role="button" data-toggle="dropdown">
                {{ .Name }}
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="{{ .Title }}-dropdown">
                {{ range .Children }}                  
                  <a class="dropdown-item" href="{{ .URL }}">
                    {{ with .Page.Params.boost }}<span class="badge badge-info">NEW: </span>{{ end }}
                    {{ .Title }}
                  </a>
                {{ end }}
              </div>
            </li>
          {{ else }}
            <li class="nav-item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
              <a href="{{ .URL }}" class="nav-link">{{ .Title }}</a>
            </li>
          {{ end  }}
        {{ end }}
      </ul>
    </div>
  </nav>
</header>

The CSS is bootstrap CSS, so yours might fit it already.

Hello pkollitsch,
thank you for sharing your code!
My bootstrap is v.3 and my code is right - my problem was with CSS (i.e. boostrap - perhaps my file is abridged).
But since then I solved my problem. First of all I decided that following the narrow labyrinth in a multilevel nested menu is too complicated - and I went with a MegaMenu. I found an excellent MegaMenu sample on the GitHub and built it into my site in the most awesome way!

Best!

Victor