# Mega Menu Code

**URL:** <https://forum.wixstudio.com/t/mega-menu-code/42803>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [August 6, 2020, 3:39pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803 "2020-08-06T15:39:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexrego2000](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alexrego2000/32/22440_2.png) [@alexrego2000](https://forum.wixstudio.com/u/alexrego2000)\
**Post date:** [August 6, 2020, 3:39pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/1 "2020-08-06T15:39:41Z")

</div>

Hello,

The standard dropdown menu for the header menu is a bit basic, so I did some research and saw that I could make my own (a mega menu). I did, and I used the code below to make sure when the user hovered over a button, the dropdown menu would appear. This worked. However, when I hovered my mouse outside the dropdown menu (and the button) it didn’t disappear. How can I make it disappear? Any suggestions are welcome 🙂

Code I used:

```javascript
export function button1_mouseIn(event) {
$w('#dropdownmenu').show();
}

export function button1_mouseOut(event) {
$w('#dropdownmenu').hide();
}

export function dropdownmenu_mouseOut(event) {
$w('#dropdownmenu').hide();
$w('#button1').enable()
}

```

---

<div class="post-metadata">

**Author:** ![mrtobor](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mrtobor/32/669_2.png) [@mrtobor](https://forum.wixstudio.com/u/mrtobor)\
**Post date:** [August 6, 2020, 4:19pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/2 "2020-08-06T16:19:02Z")

</div>

Hi there,

Your code seems correct you’re just missing another mouseIn event for the dropdownMenu to make sure it stays showing the menu when hovered over it after leaving the button.

You can do something like:

```javascript
export function button1_mouseIn(event) {
$w('#dropdownmenu').show();
}

export function button1_mouseOut(event) {
$w('#dropdownmenu').hide();
}

export function dropdownmenu_mouseIn(event) {
$w('#dropdownmenu').show();
}

export function dropdownmenu_mouseOut(event) {
$w('#dropdownmenu').hide();
}

```

I hope this helps!

---

<div class="post-metadata">

**Author:** ![alexrego2000](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alexrego2000/32/22440_2.png) [@alexrego2000](https://forum.wixstudio.com/u/alexrego2000)\
**Post date:** [August 6, 2020, 4:30pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/3 "2020-08-06T16:30:07Z")

</div>

Hello,  
Thanks for your reply. However, the box still stays there even when the mouse goes off the button and the box.

---

<div class="post-metadata">

**Author:** ![lmeyer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lmeyer/32/18166_2.png) [@lmeyer](https://forum.wixstudio.com/u/lmeyer)\
**Post date:** [August 6, 2020, 5:51pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/4 "2020-08-06T17:51:33Z")

</div>

Hey! This might help and it might not, but when working with _mouseIn / onClick_ events, I ALWAYS forget to add my Event Handlers in the Properties panel.  
I add the code but forget the necessary handlers (or the event handler has a different name than in my code), so maybe double-check that everything is there and matches up!

---

<div class="post-metadata">

**Author:** ![alexrego2000](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alexrego2000/32/22440_2.png) [@alexrego2000](https://forum.wixstudio.com/u/alexrego2000)\
**Post date:** [August 6, 2020, 6:02pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/5 "2020-08-06T18:02:08Z")

</div>

Well it absolutely helped. I double checked everything, and somehow it worked! Thanks ever so much.

EDIT: Well, when my mouse goes onto the box and out of the button it disappears…

---

<div class="post-metadata">

**Author:** ![lmeyer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/lmeyer/32/18166_2.png) [@lmeyer](https://forum.wixstudio.com/u/lmeyer)\
**Post date:** [August 7, 2020, 5:59pm UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/6 "2020-08-07T17:59:30Z")

</div>

@alexrego2000 Hey! I’m not exactly sure how you have your boxes/buttons setup but I ran into a similar problem when building mine. I had to set it up with the button (green line) overlapping the box (red line), so that when the cursor comes off the button it goes directly onto the box. Otherwise, when the cursor comes off the button it triggers the mouseOut event, which collapses the box and makes it unable to fulfill the mouseIn event. If that makes sense.

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/f/4f64e1d5c44c194e9c7c63ba76a9eed29700fe53.png)

---

<div class="post-metadata">

**Author:** ![ajay](https://avatars.discourse-cdn.com/v4/letter/a/f4b2a3/32.png) [@ajay](https://forum.wixstudio.com/u/ajay)\
**Post date:** [October 20, 2021, 7:14am UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/7 "2021-10-20T07:14:11Z")

</div>

Hey guys ,  
I have trying to create mega menu on my site for last about a week … tried my best efforts but failed maybe because I don’t have any experience of coding ☹  
But I am not going to give it up ! Can anyone of you just guide how to do this ? Shall be grateful please !

---

<div class="post-metadata">

**Author:** ![birgit-pauls16406](https://avatars.discourse-cdn.com/v4/letter/b/5f9b8f/32.png) [@birgit-pauls16406](https://forum.wixstudio.com/u/birgit-pauls16406)\
**Post date:** [December 24, 2021, 12:14am UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/8 "2021-12-24T00:14:54Z")

</div>

The box does not stay, when I move into the box. ☹

---

<div class="post-metadata">

**Author:** ![shshnkgarg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/shshnkgarg/32/32795_2.png) [@shshnkgarg](https://forum.wixstudio.com/u/shshnkgarg)\
**Post date:** [April 7, 2022, 10:07am UTC](https://forum.wixstudio.com/t/mega-menu-code/42803/9 "2022-04-07T10:07:06Z")

</div>

@lmeyer I have made sure this and the properties are on. Still this isn’t working. Please help!