Creating a custom dropdown menu with a button and a container

I'd like to create a custom horizontal menu with submenus because the 'normal' WiX horizontal menu does not give me all the design options I'd like to have.

For testing, I first created a button that should later act as a main menu button. In addition, I created a container respectively a vector art that should become the submenu (it is hidden on load). The vector art is snapped to the button so that there is no space between the two elements. A screenshot of my elements is shown below, labelled with the corresponding Ids.

What I want now is that #submenuitem appears when my mouse enters (onmouseover) the area of #mainmenuitem. When the mouse leaves (onmouseout) #mainmenuitem the submenu #submenuitem should disappear, but only if the mouse does not enter the area of #submenuitem. If the mouse moves from #mainmenuitem to #submenuitem the submenu should still be shown, so that the user is able to select items of the submenu.

The basic functionality already works (i.e. mouse entering and leaving #mainmenuitem area and then showing / hiding #submenuitem.

However, when I start adding functionality for #submenuitem, the application does not behave how I want it to behave. When I enter the area of #submenuitem it seems that it is still disappearing every second time (see video below).

Below I listed the Corvid code I used so far:

var inmainmenu= false;
var insubmenu= false;
var subshown = false;

export function mainmenuitem_mouseIn(event) {
    inmainmenu = true;
    toggle_submenu()
}

export function mainmenuitem_mouseOut(event) {
    inmainmenu = false;
    toggle_submenu()
}

export function submenuitem_mouseIn(event) {
    insubmenu = true;
    toggle_submenu()
}

export function unternehmensub_mouseOut(event) {
    insubmenu = false;
    toggle_submenu()
}

function toggle_submenu(){
    if(inmainmenu){
        $w('#submenuitem').show();
        subshown = true;
    }
    if(!inmainmenu){
        if(insubmenu){
            $w('#submenuitem').show();
            subshown = true;
        }
        else{
            $w('#submenuitem').hide();
            subshown = false;
        }
    } 
}

Maybe anyone has a suggestion what I am doing wrong here? I would appreciate any hint! 😊