Two level menus: should they be used? Why are they important?
I never found any resource explaining this. Should I avoid them and only use them when you really have too much stuff to present?
Two level menus are better for usability than traditional drop-down menus, because the user doesn't have to navigate carefully in multiple directions.
As AskTog explains, with traditional, multi-level drop-down menus:
Trying to move sideways without straying outside the menu can be difficult, especially for users with impaired mobility.
On the other hand, placing two levels of hierarchy within a single menu saves the user time because she doesn't have to navigate carefully through a maze to get where she's going. With two-level menus, you can navigate straight downward, instead of having to navigate down, then sideways, then downward again.
Two-level menus only work well with relatively simple hierarchies. On larger hierarchies it becomes inefficient. For example, if you have a 10 menus at each level of your hierarchy, such a menu would be ill-fitted because the user would be presented with 100 options inside the dropdown instead of just picking one of 10 and then one of another 10 (20 options total). For hierarchies of five or fewer items per level, the two-level menus work great.
EDIT: Jacob Nielsen has an article on why mega menus work better than normal menus and how to implement them.
Considering you are really asking about hover menus.
They can be a really good mean in creating a rich content website. It is also a trap in which you do not want to fall.
They are hard to use because they are often badly designed. @Marvin is pointing at some issues you can deal with while using them in your graphic interface.
Amazon has been kind enough to overcame this hindrances for us :
Ben Kamens from Khan Academy explains you how. A must read article : those guys where quite cunning and incredibly smart.
Below, the image that rocked my world a few weeks ago :
I should add, of course all those tricks are useless if the content is not well organized and the layout is not neat: content beeing the most important thing to consider.
Make it intuitive and proceed observantly.
In 2009 a Nielsen Norman Group finding Big, 2-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.
This sounds great... but (and this is all very old by internet standards).
In 2010 they revised their statement after researching and finding more and more bad examples of the mega menus.
Trying to stay on the bleeding edge can lead to bad design if you throw planning out the window. Remember to follow-up your design with statistical analysis and user feedback to see how much of a menu is wasted space or what can be reorganized to make it easier on the user. Test on the various devices and in the browsers your users use based on your analytic feedback. Bleeding edge functionality is not always backward compatible and may result in a bad user experience.
That being said, here's a 2013 exploration of Amazon's new mega menu.
The example you have given here is a hover menu. Hover menus can help in defining a large navigation and allow users to clearly see the child and sub child nodes of a main navigation and they also save on vertical space.However they are not excellent for usability as this article shows
Another point stated by the article which calls out why Hover menus are hard to use is
If you have just a few buttons and only one button with a submenu, then it's not bad user interface. However, if many of them have submenus you might want to consider a side page menu. Otherwise it will be hard to read and not very clear what you are trying to communicate.