Blog / Home
About
Media Gallery

Welcome
to
Thronic.com

ժʝ_

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.




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

CSS
π