Quirky menu

I have a drop panel menu in JQuery on this site

You can see it in action when hovering over the About menu item.

Here are two things I want to fix:

  1. When I hover out from the About menu item, the drop panel should go back up and thus become invisible as in default state.

  2. When I hover on the About menu item, towards the middle, the drop panel is activated. So far so good, now when I am still hovering on it but move the cursor towards the left or right edges of the About menu item, the drop panel goes back up. I’d like to eliminate this behaviour.

Unfortunately I’m not that well versed in JQuery so I’d like some expert help on solving these two issues, and maybe learn something along the way.


This is an example of how I want it to function

any help please?