That part fixes it but there's more to do.
Although I didn't agree at first, Eric is on the right track.
I thought the gaps between the menu items and the fact that they disappeared when superimposed over page text were two separate issues - they're not.
The problem is now clear. When the gaps appear between menu items and the mouse strikes a gap with underlying text, the browser thinks that it's no longer on the menus so it drops them and shows the undelying text.
I think the gaps are a result of an inherited class definition from the page's master css file.
However you need to go further and do the same modifications that Eric has shown for every part of the Menu CSS that relates to levels 2, level 3 and so on. Then it all seems to work.