000-774: top navi

Author: PowershellScripts

_includes/header.html

@@ -15,11 +15,13 @@
                 {% if site.data.navigation %}
                 {% for item in site.data.navigation %}
                     {% if item.dropdown %}
+                    <!-- First-level dropdown -->
                     <div class="navbar-item has-dropdown {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
                         <a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}">{{ item.name }}</a>
                         <div class="navbar-dropdown">
                             {% for subitem in item.dropdown %}
                                 {% if subitem.dropdown %}
+                                <!-- Second-level dropdown -->
                                 <div class="navbar-item has-dropdown is-hoverable">
                                     <a href="{{ subitem.link | relative_url }}" class="navbar-link">{{ subitem.name }}</a>
                                     <div class="navbar-dropdown">
@@ -35,12 +37,13 @@
                         </div>
                     </div>
                     {% else %}
+                    <!-- Non-dropdown first-level link -->
                     <a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
                     {% endif %}
                 {% endfor %}
                 {% endif %}
             </div>
-        
+         
 
             <div class="navbar-end">
                 <a href=""><img src="../../../../flag.png" /></a>

_sass/_main.scss

@@ -18,25 +18,35 @@ $hero-darken: $dark !default;
 @import "../node_modules/bulma-block-list/src/block-list.scss";
 
 
-
 .navbar-dropdown {
   position: relative;
 
-  .has-dropdown {
-      position: relative;
+  /* First-Level Dropdowns */
+  .has-dropdown > .navbar-dropdown {
+      display: none;
+      position: absolute;
+      left: 0;
+      top: 100%;
+      z-index: 10;
+  }
+
+  .has-dropdown:hover > .navbar-dropdown,
+  .has-dropdown:focus-within > .navbar-dropdown {
+      display: block;
+  }
 
-      &:hover .navbar-dropdown {
-          display: block;
-      }
+  /* Second-Level Dropdowns */
+  .has-dropdown.is-hoverable > .navbar-dropdown {
+      display: none;
+      position: absolute;
+      left: 100%; /* Aligns to the right of the parent dropdown */
+      top: 0;
+  }
 
-      .navbar-dropdown {
-          display: none;
-          position: absolute;
-          left: 100%; /* Aligns to the right of the parent dropdown */
-          top: 0;
-          z-index: 10; /* Ensures the submenu appears above other content */
-      }
+  .has-dropdown.is-hoverable:hover > .navbar-dropdown {
+      display: block;
   }
 }
 
 
+