diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 0e0a1104..1a5a67b5 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1352,6 +1352,11 @@ video {
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 1px_1px_1px_rgba\(0\2c 0\2c 0\2c \.06\)\] {
+  --tw-shadow: 0 2px 4px rgba(0,0,0,.02),1px 1px 1px rgba(0,0,0,.06);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 1px 1px 1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3418,6 +3423,9 @@ body {
   .md\:justify-start {
     justify-content: flex-start;
   }
+  .md\:justify-between {
+    justify-content: space-between;
+  }
 
   .md\:self-start {
     align-self: flex-start;
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
new file mode 100644
index 00000000..3618c323
--- /dev/null
+++ b/assets/js/navbar.js
@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const menus = document.querySelectorAll(".hextra-navbar-collapsible-button");
+  menus.forEach(function (menu) {
+    menu.addEventListener("mouseenter", function (e) {
+      e.preventDefault();      
+      const submenu = menu.querySelector('.hextra-navbar-submenu');
+      submenu.classList.remove('hidden');
+    });
+    menu.addEventListener("mouseleave", function (e) {
+      e.preventDefault();      
+      const submenu = menu.querySelector('.hextra-navbar-submenu');
+      submenu.classList.add('hidden');
+    });
+  });
+});
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index 96fe6508..2edde9ee 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -202,7 +202,6 @@
       "dark:hover:border-neutral-800",
       "dark:hover:shadow-none",
       "dark:hover:text-gray-100",
-      "dark:hover:text-gray-200",
       "dark:hover:text-gray-300",
       "dark:hover:text-gray-50",
       "dark:hover:text-neutral-50",
@@ -312,7 +311,6 @@
       "hover:shadow-lg",
       "hover:shadow-md",
       "hover:text-black",
-      "hover:text-gray-800",
       "hover:text-gray-900",
       "hover:text-primary-600",
       "icon",
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index cca829cf..0ab69683 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -48,7 +48,39 @@
           </a>
         {{- else -}}
           {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
-          {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
+          {{- $activeClass := cond $active "font-medium" "" -}}
+          {{- if .HasChildren }}
+            <div class="hextra-navbar-collapsible-button flex relative items-center cursor-pointer -ml-2 p-2">
+              <a
+                title="{{ or (T .Identifier) .Name | safeHTML }}"
+                href="{{ $link }}"
+                {{ if $external }}target="_blank" rel="noreferer"{{ end }}
+                class="text-sm hidden whitespace-nowrap md:inline-block contrast-more:text-gray-700 contrast-more:dark:text-gray-100 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 {{ $activeClass }}"
+              >
+                <span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
+              </a>
+              <span>
+                {{- template "navbar-collapsible-button" -}}
+              </span>
+              <ul class="hextra-navbar-submenu hidden absolute top-full bg-white w-max px-3 dark:bg-slate-900 border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 py-2 ml-4 rounded shadow-[0_2px_4px_rgba(0,0,0,.02),1px_1px_1px_rgba(0,0,0,.06)]">
+                {{ range .Children }}
+                  {{- $url := .URL | relLangURL -}}
+                  {{- $subexternal := strings.HasPrefix $url "http" -}}
+                  {{- with .Page -}}
+                    {{- $url = .RelPermalink -}}
+                  {{- end -}}
+                  <li >
+                    <a
+                      title="{{ or (T .Identifier) .Name | safeHTML }}"
+                      href="{{ $url }}"
+                      {{ if $subexternal }}target="_blank" rel="noreferer"{{ end }}
+                      class="text-sm flex py-2 leading-tight cursor-pointer contrast-more:text-gray-700 contrast-more:dark:text-gray-100 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 {{ if (eq $.RelPermalink $url) }}font-medium{{ end }}"
+                    >{{ or (T .Identifier) .Name | safeHTML }}</a>  
+                  </li>
+                {{ end }}
+              </ul>
+            </div>
+          {{- else -}}
           <a
             title="{{ or (T .Identifier) .Name | safeHTML }}"
             href="{{ $link }}"
@@ -57,6 +89,7 @@
           >
             <span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
+          {{- end -}}
         {{- end -}}
       {{- end -}}
     {{- end -}}
@@ -67,3 +100,10 @@
     </button>
   </nav>
 </div>
+
+
+{{- define "navbar-collapsible-button" -}}
+<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 8.25l-7.5 7.5-7.5-7.5" class="origin-center transition-transform rtl:-rotate-180"></path>
+</svg>
+{{- end -}}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index dbb4fe43..1086a720 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -5,9 +5,10 @@
 {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
 {{- $jsSidebar := resources.Get "js/sidebar.js" -}}
+{{- $jsNavbar := resources.Get "js/navbar.js" -}}
 {{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
 
-{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
+{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsNavbar $jsBackToTop | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
   {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}