JavaScript

I am creating a mega menu in reactjs framework for my ecommerce website. When ever i hover on list item it shows mega menu div but when i move cursor down the menu hides itself. Why it is not stay as it is ?

Local state which controls the menu display state on onMouseEnter and onMouseLeave works well.

const [visible, setVisible] = useState(false);

  const showMenu = () => {
    setVisible(true);
  };

  const hideMenu = () => {
    setVisible(false);
  };

<li className="mega-drop-down collapsed">
                  <a
                    className="accord-icon"
                    onMouseEnter={showMenu}
                    onMouseLeave={hideMenu}
                  >
                    WHAT WE DO
                  </a>
                  <div
                    className="animated fadeIn mega-menu"
                    style={{ display: visible ? "block" : "none" }}
                  >
                    <div className="mega-menu-wrap">
                      <div className="row-t">
                        <div className="col-md-8">
                          <h4 className="row-t mega-title title1">
                            <a> Translation Services</a>
                          </h4>
                          <div className="border-line title1">
                            <div className="row-t">
                              <ul className="stander">
                                <div className="col-md-4">
                                  <li>
                                    <a> Supported languages</a>
                                  </li>
                                </div>
                                <div className="col-md-4">
                                  <li>
                                    <a> Translation Cost</a>
                                  </li>
                                </div>                               
                              </ul>
                            </div>
                            <div className="row-t">
                              <div className="col-md-4">
                                <h4 className="row-t mega-title title2">
                                  Areas of Expertise
                                </h4>
                                <div className="border-line title2">
                                  <ul className="stander">
                                    <li>
                                      <a> Document</a>
                                    </li>
                                    <li>
                                      <a> Legal</a>
                                    </li>                                   
                                    <li>
                                      <a> Technical</a>
                                    </li>                                   
                                  </ul>
                                </div>
                              </div>
                              <div className="col-md-4">
                                <h4 className="row-t mega-title title2">
                                  Localization
                                </h4>
                                <div className="border-line title2">
                                  <ul className="stander">                                   
                                    <li>
                                      <a> Mobile App</a>
                                    </li>
                                    <li>
                                      <a> Software</a>
                                    </li>
                                    <li>
                                      <a> Medical</a>
                                    </li>
                                  </ul>
                                </div>
                              </div>                              
                            </div>
                          </div>
                        </div>                        
                      </div>
                    </div>
                  </div>
                </li>

Answer

Because you placed the function on “a” element, when you leave that element, the onMouseLeave function runs.

you should put those functions on the “mega-drop-down” element

also if u know CSS you can make it very simply

.mega-drop-down:not(:hover) .mega-menu{
   display:none;
}

<ul>
  <li class="mega-drop-down collapsed">
     <a class="accord-icon" >WHAT WE DO </a>
        <div class="animated fadeIn mega-menu" >
                    Mega Menu
       </div>
   </li>
</ul>

Mega menu div hides on hover | reactjs

Advertisement

Answer