Modified mega menu behaviour to onHover

layout/Header.js

@@ -175,51 +175,35 @@ const Header = () => {
                       </Link>
                     </li>
 
-                    <li className="nav-item">
-                      <button
-                        onClick={() => setClientServicingOpen(!clientServicingOpen)}
+                    {/* Wrap both the Client Servicing nav item and the mega menu in a parent div for hover logic */}
+                    <li
+                      className="nav-item"
+                      onMouseEnter={() => setClientServicingOpen(true)}
+                      onMouseLeave={() => setClientServicingOpen(false)}
+                    >
+                      <span
                         className="nav-link dropdown-nav"
                         style={{ background: "none", border: "none", cursor: "pointer" }}
                       >
                         Client Servicing
                         <span className="dropdown-arrow"></span>
-                      </button>
+                      </span>
                     </li>
-
-                    <li className="nav-item">
-                      <Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
-                        Industry
-                      </Link>
-                    </li>
-
-                    <li className="nav-item">
-                      <Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
-                        Careers
-                      </Link>
-                    </li>
-
-                    <li className="nav-item">
-                      <Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
-                        Contact Us
-                      </Link>
-                    </li>
-                  </ul>
-                </div>
-              </nav>
-            </div>
-          </div>
-        </div>
-
-        {/* Overlay for closing menus */}
+                    {clientServicingOpen && (
                       <div
-          className={`mega-overlay ${clientServicingOpen ? "show" : ""}`}
-          onClick={() => {
-            setClientServicingOpen(false)
+                        className="mega-menu show"
+                        style={{
+                          position: 'fixed',
+                          left: 0,
+                          top: 'calc(64px + 1px)', // adjust 64px to your header height if needed
+                          width: '100vw',
+                          zIndex: 1000,
+                          background: '#fff',
+                          boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
                         }}
-        ></div>
-
-        {/* Client Servicing Mega Menu */}
-        <div className={`mega-menu ${clientServicingOpen ? "show" : ""}`}>
+                        onMouseEnter={() => setClientServicingOpen(true)}
+                        onMouseLeave={() => setClientServicingOpen(false)}
+                      >
                         <div className="mega-menu-content">
                           <div className="mega-grid client-servicing-grid">
                             {clientServices.map((service, index) => (
@@ -245,6 +229,31 @@ const Header = () => {
                           </div>
                         </div>
                       </div>
+                    )}
+
+                    <li className="nav-item">
+                      <Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
+                        Industry
+                      </Link>
+                    </li>
+
+                    <li className="nav-item">
+                      <Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
+                        Careers
+                      </Link>
+                    </li>
+
+                    <li className="nav-item">
+                      <Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
+                        Contact Us
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
+              </nav>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   )