000-781: extra level navi

Author: PowershellScripts

_sass/_main.scss

@@ -18,32 +18,40 @@ $hero-darken: $dark !default;
 @import "../node_modules/bulma-block-list/src/block-list.scss";
 
 
-/* Prevent navbar from growing vertically */
-.navbar-menu {
-  overflow: visible;
-  position: relative;
-  height: auto;
-}
-
-/* Ensure dropdown content appears over the navbar */
-.navbar-dropdown {
+/* Position third-level dropdown */
+.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown .navbar-dropdown {
+  display: none; /* Hide third-level dropdown by default */
   position: absolute;
-  background-color: #ffffff; /* Match your dropdown background color */
+  left: 100%; /* Position it to the right of the second-level item */
+  top: 0;
+  background-color: #ffffff; /* Match your dropdown background */
   z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for clarity */
 }
 
-/* Keep dropdown within bounds */
-.navbar-item.has-dropdown:hover .navbar-dropdown {
+/* Show third-level dropdown on hover */
+.navbar-item.has-dropdown .navbar-dropdown .navbar-item.has-dropdown:hover .navbar-dropdown {
   display: block;
-  top: 100%; /* Position below the parent item */
-  left: 0;
 }
 
-/* Optional: Add some shadow for better visibility */
-.navbar-dropdown {
+/* Ensure the second-level menu doesn't get disrupted */
+.navbar-item.has-dropdown .navbar-dropdown {
+  position: absolute;
+  background-color: #ffffff;
+  z-index: 1000;
+  top: 100%;
+  left: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
+/* Prevent navbar height from expanding */
+.navbar-menu {
+  overflow: visible;
+  position: relative;
+  height: auto;
+}
+
+