Wix Code: Element Hide and Show

Hi
I am creating a drop down menu which will get activated when the user hovers over the menu item. The drop down menu available in Wix was not suiting my purpose and the look I wanted, hence I am making a custom one. The code I used is simple.

The menu item is Equipment which is named Equipmentbutton and the menu container box is titled EquipmentsMenu :

export function Equipmentbutton_mouseIn(event) {
//Add your code for this event here:
$w(‘#EquipmentsMenu’).show();
}

export function Equipmentbutton_mouseOut(event) {
//Add your code for this event here:
$w(‘#EquipmentsMenu’).hide();
}

export function EquipmentsMenu_mouseIn(event) {
//Add your code for this event here:
$w(‘#EquipmentsMenu’).show();
}

export function EquipmentsMenu_mouseOut(event) {
//Add your code for this event here:
$w(‘#EquipmentsMenu’).hide();
}

So, the problem is, when I am hovering over the Equipment button, the menu shows up fine. But as soon as I hover over the menu/container box itself, the menu vanishes. Why is it so? I had worked on that by applying the show(), hide() function to the container box as well.

I have this code in the Site portion of the code. Keeping it in the Page portion also doesn’t help.

Am I doing something wrong here?

Any help will be greatly appreciated.
Thanks

Place all the buttons in a box. Hide that box. When you mouseIn on a particular button, show the box, when you go to the next button have it hide all other boxes. An example of this can be found on penny-prints.com