I've made a minor redesign change to my company site, switching it over from hand-coded ASP to Vine Type. Part of why I didn't do this earlier is that I had flyout navigation in place.

Now with the release of Vine Type 0.98, I can use the $_nav_map template variable where my navigation goes, then employed nickrigby-style css flyout technique (with some Eric Meyer thrown in ) to create the flyout menu. As I add pages, the flyout expands automatically.

In my case, I'm limiting myself to two levels deep (the site is not that large) but with a couple adjustments it could support three or four levels. Take a look! http://vinebranches.com

And I should mention something -- standard nickrigby flyout CSS includes additional selectors so IE will invoke :hover behavior. Vine Type comes with builtin IE :hover support (and IE PNG transparency support) in the form of this CSS selector:

@import url(../behaviors/behaviors.css);

So where the nickrigby example shows this...

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul
{ display: none; } /* Hide sub-menus initially */

...we can remove the references to the class ".over" (that's how Nick invokes IE behavior code) and use only the native :hover selectors. It's a little cleaner. And of course on my site, I used a div id of "nav" not "primary-nav" so my correlating CSS selector looks like this...

ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul
{ display: none; } /* Hide sub-menus initially */

...and accomplishes the same thing. And of course, every page is valid XHTML.

• NickRigby CSS Flyouts
• Suckerfish CSS Dropdowns