Copying from Google Material Design Staged animation for dropdown menu, this method show you how to create staged animation using CSS3.
Both methods use CSS3 transition feature. For creating staged animation of course we need to set the delay or each item. For the first method we create these delays by assigning it to each .menu-item and identifying the index by using nth-child(n).
The downside of this technique is we need to add the delay based on how many menu-item available. And there is some slight delay effect when you unhover the menu and quickly hovering it again. You can see the delay. because when we set the delay, it also apply to unhover state.
For the second method we dynamicly add the delay using jQuery, as well as the transfrom an opacity property. The big advantage of this method is you don't need to declare the delay for unknown index. And the slightly delay effect on first method can be removed by resetting the style attribute upon un-hovering.
If you have a better method please let me know in the comment. Thanks :)