CSS Flyout Menus

It 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.

Change this code to add more levels:
#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.

This document was last updated July 5th, 2011.
Written by: Dag Jonny Nedrelid
©2007-2012 http://thronic.com

Feel free to leave a comment.
Name:
URL:
0