Tell me you have not had this scenario:
You create a simple menu with hover fly-outs it works, you think you are done, then your customer or users return saying when you hover out it disappears and you have to start again. “It’s annoying”.
If you haven’t my word you are lucky, or a lot of the time this just accepted as it is done with a hover.
I think we can avoid this or at the very least have less pain points like this with relatively small code. With this small amount of code added to your standard CSS hover menu you can create a CSS hover menu with delay. You can simply use visibility instead of display (if you are not already) and add a slight delay on your transition and it gives users the chance to hop back into the fly-out when they have accidentally hovered out of it.
in the Codepen below (feel free to take the code) you can see how this can be achieved. Simply adding a mixture of transition delays on hover and :not(:hover) on elements you can get your menu to delay closing if you are hovering out of the second or third level options but, react quickly if you hover into other menu elements. Neat huh!
See the Pen Pure CSS hover menu with delay / less pain points by steven hoskins (@hoskinshozzy) on CodePen