Example of a three-tier menu structure.

Currently, I work for a University where I am heading up the technical implementation of a content management system. One of the more troublesome problems along the way has become the menus for the site - or more specifically, the visual representation of the menus.

The drafts of the IA wireframes only listed a two-tier menu system - basically “Menu Heading -> Item”. However, now it has become clear that the users need more than this, so I am working on the premise of a three-tier menu-system now. For example “Menu Heading -> Item -> Submenu Heading -> Submenu Item” with the sub-menus not being defined by the user, but being automatically generated by the system based upon other criteria. It sounds pretty straight forward from a design perspective, doesn’t it? Perhaps I’m just having a web designer’s kernel panic, but I cannot come up with something I like. Semantically, it’s all kosher - un-ordered lists and headings - it’s really just the way it looks. At present, the rough draft looks like something like the image attached to this post. Clicking on the arrows collapses or expands the menu items (the top lot using a fancy script.aculo.us SlideUp() effect).

Has anyone seen anything that matches (or is similar to) this approach and made them say “Wow”?