Dropdown Menu Closes When Cursor Passes Over Menu Items on Second Row

My website's header menu has two rows of menu items when displayed on smaller screens due to their being many menu items.

The problem is that after opening a dropdown menu from one of the menu items on the first row by hovering over the menu item with the cursor, if the cursor passes over one of the menu items on the second row, the dropdown menu disappears and the cursor is now ready to click on the menu item from the second row instead of one of the options from the dropdown menu.

In other words, the menu item underneath an open dropdown menu will take priority if the cursor passes over its position, even if it is covered by the open dropdown menu.

Also, I've attached a GIF to show the problem as I'm not sure if I can give the link to the site because it belongs to a client.

Any help would be greatly appreciated, thanks!

 

Hi, I can't seem to find an option to edit the Row Settings for the menu, could you tell me where I can find these settings?

Thanks!

 

Thanks for helping, I'm not sure how to change this as the menu is singular and only appears as two rows on smaller screens.

Here is a link to the website: https://www.temporary-url.com/E670E5

If you resize your window to be small enough (around the size of a 13-inch display) and refresh the page you should see the issue I'm talking about.

Thanks again!