Expanding menu, multiple nested levels (persistent)

This demo uses one of the following configuration files:

expanding-multiple.js
Javascript configuration (for ASP config add <% %> instructions and rename)
expanding-multiple.ini
PHP configuration

And the following images:

Menu persistence is handled by the Snapshot Cookie extension (click open a few menus and then hit "Refresh", and you should see your last selection persist, if you accept sessional cookies).

You could alternatively use the "You are here" extension, which can be configured to open here-indicated menu branches automatically, and hence provide contextual navigation.

This demo also has the following additional CSS - to reposition the menus, and to reduce progressively the width of nested levels, using the simplified box model hack to feed different widths to IE5. The ID-selector and extensive use of !important rules is so they have enough specificity to override the menus' default styling:

/* expanding menu styling */#udm ul {	margin-left:0 !important;	margin-top:1px !important;	width:128px !important;	w\idth:120px !important;	}#udm ul ul {	width:120px !important;	w\idth:112px !important;	border-style:dashed;	background-color:#ffe;	}#udm ul ul ul {	width:112px !important;	w\idth:104px !important;	border-style:dotted;	background-color:#ffd;	}/* give all anchors a hand cursor */#udm a {	cursor:pointer !important;	cursor:hand !important;	}

This configuration is not supported in Mac/IE5, because it doesn't support menus that open onclick.

For more information about this, please see Creating an expanding menu.