Yep, the trick here is to keep the menu open even after the mouse has left the parent menu area. It's so simple yet probably quite difficult to code.
+--------+
| parent |
| +--------+
| /|submenu |
| / | |
|=====/==| |
|=====\==| |
| \ | |
+------ \| |
+--------+
and close immediately when not inside the triangle.Also, if in the parent there's another menu item with submenu somewhere on the path of mouse inside this triangle, ignore this item.
For best results, if mouse was inside the submenu for a moment, keep the submenu open until clicking away from it or moving over a different item in the parent menu. So many details!
Just requires a timeout for the onmouseover event. jQuery's hover intent would work wonders.
Basically show the submenu onmouseover of parent and if no mouseover is detected on the submenu within 400ms => hide the submenu.
It gives the user a slight bit of time to move the mouse to the submenu rather than relying on perfect mouse movements.