Blog / Home
Media Gallery



CSS Flyout Menus

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

Original Post: Jan 26th, '22 22:09 CET.
Updated: Jan 26th, '22 22:13 CET.