feat: ADD dropdown field for the menu #28

theme/default/assets/style.css

@@ -61,6 +61,58 @@ h1 {
     color: #0066cc;
 }
 
+/* Dropdown (one level, CSS-only, opens on hover / keyboard focus) */
+.nav-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.nav-dropdown-toggle {
+    cursor: pointer;
+}
+
+.nav-caret {
+    font-size: 0.75em;
+}
+
+.nav-submenu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 6px;
+    min-width: 160px;
+    padding: 6px;
+    background: #fff;
+    border: 1px solid #efefef;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    z-index: 100;
+}
+
+/* Invisible bridge across the gap so hover isn't lost between toggle and menu */
+.nav-submenu::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: 0;
+    right: 0;
+    height: 6px;
+}
+
+.nav-dropdown:hover > .nav-submenu,
+.nav-dropdown:focus-within > .nav-submenu {
+    display: block;
+}
+
+.nav-submenu .nav-item {
+    display: block;
+    border: none;
+    border-radius: 6px;
+    text-align: left;
+    white-space: nowrap;
+}
+
 a {
     color: #0066cc;
     text-decoration: none;

theme/default/templates/header.tmpl

@@ -12,7 +12,22 @@
     <p class="blog-description">{{ blog_description }}</p>
     <nav class="main-nav">
         {% for item in navbar_items %}
+        {% if item.children %}
+        <div class="nav-dropdown">
+            {% if item.url %}
+            <a href="{{ item.url }}" class="nav-item nav-dropdown-toggle">{{ item.text }} <span class="nav-caret">▾</span></a>
+            {% else %}
+            <span class="nav-item nav-dropdown-toggle" tabindex="0" role="button" aria-haspopup="true">{{ item.text }} <span class="nav-caret">▾</span></span>
+            {% endif %}
+            <div class="nav-submenu">
+                {% for child in item.children %}
+                <a href="{{ child.url }}" class="nav-item">{{ child.text }}</a>
+                {% endfor %}
+            </div>
+        </div>
+        {% else %}
         <a href="{{ item.url }}" class="nav-item">{{ item.text }}</a>
+        {% endif %}
         {% endfor %}
     </nav>
 </header>