Dropdown menu / submenu hover problem

[sonnisc]

Dear all,

I'm working on a website for an artist, which includes a dropdown menu with several submenu point.
So far the forum has helped me a lot with custom CSS and I managed to style the dropdown menu to my wishes.

Now since a few days, both in Safari and Chrome, there is a problem that sometimes the dropdown box suddenly appears underneath the cursor and the submenu items thus can't be klicked upon.

I found in another thread where @mariusjopen explained that removing the "top: 30px" to remove the gap between top and sub menu and adding "padding-top: 20px" helps to solve this issue.
However it is still happening (mostly in Safari).

Is there any other thing thing that might help?

Here is the link to the website:
http://milenawiedemer.de/

And here the CSS I used:

.laynav.primary {
position: fixed;
left: 41%;
z-index: 99999;
}
nav.primary .sub-menu {
display: none;
position: absolute;
left: -10px;
background-color: white;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
padding: 20px;
padding-top: 20px;
margin-top: 1px;
}
nav.primary .sub-menu li{
display: block;
padding-bottom: 5px;
}
.menu-item:hover .sub-menu{
display: block !important;
}
li.menu-item-has-children{
position: relative;
}

Any help would be greatly appreciated!
Thanks a lot,
Sonni