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.
JavaScript
x
10
10
1
const [visible, setVisible] = useState(false);
2
3
const showMenu = () => {
4
setVisible(true);
5
};
6
7
const hideMenu = () => {
8
setVisible(false);
9
};
10
JavaScript
1
78
78
1
<li className="mega-drop-down collapsed">
2
<a
3
className="accord-icon"
4
onMouseEnter={showMenu}
5
onMouseLeave={hideMenu}
6
>
7
WHAT WE DO
8
</a>
9
<div
10
className="animated fadeIn mega-menu"
11
style={{ display: visible ? "block" : "none" }}
12
>
13
<div className="mega-menu-wrap">
14
<div className="row-t">
15
<div className="col-md-8">
16
<h4 className="row-t mega-title title1">
17
<a> Translation Services</a>
18
</h4>
19
<div className="border-line title1">
20
<div className="row-t">
21
<ul className="stander">
22
<div className="col-md-4">
23
<li>
24
<a> Supported languages</a>
25
</li>
26
</div>
27
<div className="col-md-4">
28
<li>
29
<a> Translation Cost</a>
30
</li>
31
</div>
32
</ul>
33
</div>
34
<div className="row-t">
35
<div className="col-md-4">
36
<h4 className="row-t mega-title title2">
37
Areas of Expertise
38
</h4>
39
<div className="border-line title2">
40
<ul className="stander">
41
<li>
42
<a> Document</a>
43
</li>
44
<li>
45
<a> Legal</a>
46
</li>
47
<li>
48
<a> Technical</a>
49
</li>
50
</ul>
51
</div>
52
</div>
53
<div className="col-md-4">
54
<h4 className="row-t mega-title title2">
55
Localization
56
</h4>
57
<div className="border-line title2">
58
<ul className="stander">
59
<li>
60
<a> Mobile App</a>
61
</li>
62
<li>
63
<a> Software</a>
64
</li>
65
<li>
66
<a> Medical</a>
67
</li>
68
</ul>
69
</div>
70
</div>
71
</div>
72
</div>
73
</div>
74
</div>
75
</div>
76
</div>
77
</li>
78
Advertisement
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
JavaScript
1
3
1
.mega-drop-down:not(:hover) .mega-menu{
2
display:none;
3
}
JavaScript
1
8
1
<ul>
2
<li class="mega-drop-down collapsed">
3
<a class="accord-icon" >WHAT WE DO </a>
4
<div class="animated fadeIn mega-menu" >
5
Mega Menu
6
</div>
7
</li>
8
</ul>