Modified mega menu behaviour to onHover

layout/Header.js

@@ -175,16 +175,61 @@ 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>
+                    {clientServicingOpen && (
+                      <div
+                        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)'
+                        }}
+                        onMouseEnter={() => setClientServicingOpen(true)}
+                        onMouseLeave={() => setClientServicingOpen(false)}
+                      >
+                        <div className="mega-menu-content">
+                          <div className="mega-grid client-servicing-grid">
+                            {clientServices.map((service, index) => (
+                              <div key={index} className="mega-column">
+                                <div className="service-header">
+                                  <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit' }}>
+                                    <strong>{service.title}</strong>
+                                  </Link>
+                                </div>
+                                {service.items.length > 0 && (
+                                  <ul className="mega-column-list">
+                                    {service.items.map((item, itemIndex) => (
+                                      <li key={itemIndex}>
+                                        <Link href={item.href} className={`${isActive(item.href) ? "active" : ""}`}>
+                                          {item.name}
+                                        </Link>
+                                      </li>
+                                    ))}
+                                  </ul>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    )}
 
                     <li className="nav-item">
                       <Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
@@ -209,42 +254,6 @@ const Header = () => {
             </div>
           </div>
         </div>
-
-        {/* Overlay for closing menus */}
-        <div
-          className={`mega-overlay ${clientServicingOpen ? "show" : ""}`}
-          onClick={() => {
-            setClientServicingOpen(false)
-          }}
-        ></div>
-
-        {/* Client Servicing Mega Menu */}
-        <div className={`mega-menu ${clientServicingOpen ? "show" : ""}`}>
-          <div className="mega-menu-content">
-            <div className="mega-grid client-servicing-grid">
-              {clientServices.map((service, index) => (
-                <div key={index} className="mega-column">
-                  <div className="service-header">
-                    <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit' }}>
-                      <strong>{service.title}</strong>
-                    </Link>
-                  </div>
-                  {service.items.length > 0 && (
-                    <ul className="mega-column-list">
-                      {service.items.map((item, itemIndex) => (
-                        <li key={itemIndex}>
-                          <Link href={item.href} className={`${isActive(item.href) ? "active" : ""}`}>
-                            {item.name}
-                          </Link>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
       </div>
     </>
   )