CSS过渡简单地导致元素在被隐藏后“可以”移动

I have a link that when you hover on top, should display a drop down menu. I would like for this drop down menu to have a transition while appearing/disappearing. Currently, when I hover on the link, the drop down menu transitions in, and when I move the cursor away from the link, it transitions out. The problem is that the drop down menu, once hidden again, is still "hoverable" for a brief moment, causing it to reappear when I hover in the location where it would be were it visible (see it here: I have a link that when you hover on top, shoul