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.

Yes. Not only that, it should keep the submenu open when traveling inside this triangle (but close on timeout if mouse stays still inside it):

      +--------+
      | 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!

Upvoted for the ASCII art alone. That seems to be a lost art, particularly here on HN. Long live the ASCII art diagram!

I'm also a big fan of ASCII diagrams. The ones I use to explain my Rails authorization gem, Authority (https://github.com/nathanl/authority#the-flow-of-authority), were made using a great tool called Asciiflow: http://www.asciiflow.com/

Yeah! Was it done in Emacs artist-mode by any chance?

Haha, no, Vim in replace mode. But yeah, artist-mode is awesome.

Yes! Absolutely. We wanted to add some javascript love to the dropdowns, but ultimately didn't have the time to get it in there for launch. The beautiful part of it is we can always improve :). Much love for the diagram as well—I'll see if I can get Jacob to cook this up.

Thank you!

Not difficult at all. For a simple fix, one just needs to add a timeout between receiving the mouseOut event and hiding the menu. OS X appears to do something slightly more complicated; it hides the menu immediately if you mouse out away from the submenu, but keeps the menu open for about one second if you mouse out towards it.

But then you couldn't use the `:hover` pseudo selector; you'd have to replace css with javascript.

In usability vs "purity" of implementation wins usability.

Could use transition-delay. Supported in all browsers except IE.

This should really be considered a bug of the css spec.

The CSS spec's :hover was never made for dropdowns, it was made for simple on-hover effects, IMO.

Apparently the CSS spec does allow delayed behavior - http://www.w3.org/TR/css3-transitions/#transition-delay-prop...

Its not difficult at all actually.

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.

I wrote about this issue and ways to overcome it a little while back (with pictures!): http://thomaspark.me/2011/10/making-menus-escapable/

Thank you for calling this out. We'll fix it up as best as we can with the next release. Knew it going into this release it wasn't enough, so hopefully we can iterate on it to get the right behavior.

There is no more egregious web UI failure than the hated double-hover. It's a disaster of the first water.