fix: navigation dropdowns now work with actual menu structure

- Created hvac-navigation-fix.css to work with span.menu-toggle elements
- Fixed hover states for menu items using spans instead of anchors
- Ensured proper display/visibility/opacity transitions
- Added z-index layering to prevent conflicts
- Mobile responsive behavior maintained

The issue was that the menu uses span.menu-toggle instead of anchor tags,
so the CSS selectors needed to be updated to match the actual HTML structure.

assets/css/hvac-navigation-fix.css

@@ -0,0 +1,163 @@
+/**
+ * HVAC Navigation Fix
+ * Fixes dropdown functionality for the actual menu structure
+ * 
+ * @version 2.0.1
+ * @since 2025-08-21
+ */
+
+/* Fix for menu items using span.menu-toggle instead of a tags */
+.hvac-trainer-menu .menu-item-has-children > .menu-toggle {
+    display: inline-flex !important;
+    align-items: center;
+    padding: 18px 16px;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    position: relative;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+
+/* Hover effect for menu toggles */
+.hvac-trainer-menu .menu-item-has-children > .menu-toggle:hover {
+    color: var(--hvac-primary-500, #0274be);
+    background: rgba(2, 116, 190, 0.05);
+}
+
+/* Fix dropdown visibility on hover */
+.hvac-trainer-menu .menu-item.has-children:hover > .sub-menu,
+.hvac-trainer-menu .menu-item.has-children:focus-within > .sub-menu,
+.hvac-trainer-menu .menu-item.has-children.menu-open > .sub-menu {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+/* Ensure submenus are properly styled */
+.hvac-trainer-menu .sub-menu {
+    position: absolute !important;
+    top: 100% !important;
+    left: 0 !important;
+    min-width: 220px !important;
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
+    padding: 8px 0 !important;
+    margin: 0 !important;
+    list-style: none !important;
+    z-index: 9999 !important;
+    
+    /* Hidden by default */
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    transform: translateY(-10px) !important;
+    transition: all 0.3s ease !important;
+}
+
+/* Dropdown arrow animation */
+.hvac-trainer-menu .menu-item-has-children .dropdown-arrow {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 12px;
+    transition: transform 0.3s ease;
+    color: #9ca3af;
+}
+
+.hvac-trainer-menu .menu-item-has-children:hover .dropdown-arrow,
+.hvac-trainer-menu .menu-item-has-children.menu-open .dropdown-arrow {
+    transform: rotate(180deg);
+    color: var(--hvac-primary-500, #0274be);
+}
+
+/* Submenu items */
+.hvac-trainer-menu .sub-menu .menu-item {
+    margin: 0 !important;
+    width: 100% !important;
+    display: block !important;
+}
+
+.hvac-trainer-menu .sub-menu .menu-item > a {
+    display: block !important;
+    padding: 10px 20px !important;
+    color: #4b5563 !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    text-decoration: none !important;
+    transition: all 0.2s ease !important;
+    white-space: nowrap !important;
+}
+
+.hvac-trainer-menu .sub-menu .menu-item > a:hover {
+    color: var(--hvac-primary-500, #0274be) !important;
+    background: rgba(2, 116, 190, 0.05) !important;
+    padding-left: 24px !important;
+}
+
+/* Fix for nested dropdowns */
+.hvac-trainer-menu .sub-menu .sub-menu {
+    position: absolute !important;
+    top: 0 !important;
+    left: 100% !important;
+    margin-left: 4px !important;
+}
+
+/* Keep dropdown open when hovering over submenu */
+.hvac-trainer-menu .sub-menu:hover {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Mobile responsive - hide hover behavior */
+@media (max-width: 992px) {
+    .hvac-trainer-menu .menu-item.has-children:hover > .sub-menu {
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+    }
+    
+    /* On mobile, only show when explicitly opened */
+    .hvac-trainer-menu .menu-item.has-children.menu-open > .sub-menu {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        position: static !important;
+        box-shadow: none !important;
+        border: none !important;
+        background: #f9fafb !important;
+        padding-left: 20px !important;
+    }
+}
+
+/* Ensure proper z-index layering */
+.hvac-trainer-menu-wrapper {
+    position: relative;
+    z-index: 1000;
+}
+
+.hvac-trainer-menu {
+    position: relative;
+    z-index: 1001;
+}
+
+/* Override any conflicting styles */
+.hvac-page-wrapper .hvac-trainer-menu .sub-menu,
+.hvac-plugin-page .hvac-trainer-menu .sub-menu {
+    /* Force our styles with maximum specificity */
+    display: none !important;
+}
+
+.hvac-page-wrapper .hvac-trainer-menu .menu-item.has-children:hover > .sub-menu,
+.hvac-plugin-page .hvac-trainer-menu .menu-item.has-children:hover > .sub-menu {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}

includes/class-hvac-scripts-styles.php

@@ -302,6 +302,14 @@ class HVAC_Scripts_Styles {
             $this->version
         );
         
+        // Load navigation fix with high priority
+        wp_enqueue_style(
+            'hvac-navigation-fix',
+            HVAC_PLUGIN_URL . 'assets/css/hvac-navigation-fix.css',
+            array('hvac-navigation-enhanced', 'hvac-consolidated-core'),
+            $this->version
+        );
+        
         // Always load fixed core bundle
         wp_enqueue_style(
             'hvac-consolidated-core',