diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 65d7386..2f5ff63 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,11 +2,33 @@
             <h1 class="logo"><a href="/"><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"/></a></h1>
             <nav class="menu">
               <ul>
-                {{ with .Site.Menus.main }}
-                {{ range . }}
-                <li class="menu-nav-item"> <a  href="{{ .URL | relURL }}" title="{{ .Title }}">{{ .Name }}</a>
-                {{ end }}
-                {{ end }}
+              {{ $currentPage := . }}
+              {{ range .Site.Menus.main }}
+              {{ if .HasChildren }}
+                <details class="menu-dropdown">
+                <summary class="menu-nav-item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
+                    <a href="#">
+                        {{ .Pre }}
+                        <span>{{ .Name }}</span>
+                    </a>
+                </summary>
+                <ul class="sub-menu">
+                    {{ range .Children }}
+                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+                            <a href="{{ .URL }}">{{ .Name }}</a>
+                        </li>
+                    {{ end }}
+                </ul>
+              </details>
+            {{ else }}
+                <li class="menu-nav-item">
+                    <a href="{{ .URL }}">
+                        {{ .Pre }}
+                        <span>{{ .Name }}</span>
+                    </a>
+                </li>
+            {{ end }}
+        {{ end }}
               </ul>
             </nav>
     </header>
\ No newline at end of file