/** * 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: 99999 !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: 10000; } .hvac-trainer-menu { position: relative; z-index: 10001; } /* Parent menu items need relative positioning */ .hvac-trainer-menu .menu-item-has-children, .hvac-trainer-menu .menu-item.has-children { position: relative; } /* 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; }