CSS Flyout Menus


Utilizes csshover.htc (not required for modern browsers) for old IE support which you can read more about here. It's otherwise just pure CSS (hover) and simple unordered list structures. The Example supports 4 levels by default. Right-click this page and view its source for all demo styling used.

Main parts
#navwrapper ul ul, // Hide second menu by default.
#navwrapper ul li:hover ul ul, // Hide third menu on hovering first.
#navwrapper ul ul li:hover ul ul // Hide fourth menu on hovering second.
{display: none;}

#navwrapper ul li:hover ul, // Show second menu on hovering first.
#navwrapper ul ul li:hover ul, // Show third menu on hovering second.
#navwrapper ul ul ul li:hover ul // Show fourth menu on hovering third.
{display: block;}

Then just style them as you like. Refer to example code for illustration.