The preferred multidimensional html/css menu

Yesterday I wrote about how friends and family from time to time asks for help when developing some homegrown php project and today was no exception.
I was asked if I could recommend a simple but efficient multi dimensional menu that could fit into a left column of a website.

A couple of years back I remember that I used some menu relying on a homegrown javascript library doing the best to take care of the many different browsers javascript implementation.
The actual menu content was placed inside lots of tables hence it wasn't easy to maintain.

Today many different opensource dropdown menu's are available so the job is more to look up the one that suites you best, than writing a bunch of code and markup - and the one I ended up with is the extended suckerfish dropdown menu.
It is almost a html/css only menu (of course some javascript is nessesary to please IE!) and was very simple to implement.
The menu content is rendered as unordered list items - (ul and li elements) so serverside generation of the menu is easy.

Customize it
The default implementation represents the menu as a normal top menu, so a bit of customization had to be done to make the menu fit as a left site menu.

The following did the trick:

/* set the width of the entire menu */
#nav {
  width: 10em;
}


/* remove this as it aligns the toplevel menu to the left of eachother
#nav li {
  float: left;
  width: 10em;
}
*/

/* add this as it let the first level menu appear to the left of the first level menu */
#nav li ul {
  margin: -1em 0 0 10em;
}

#nav li ul ul {
  margin: -1em 0 0 10em;
}

I must say the menu is very cool and I can indeed recommend it!

Drawback
The only drawback of being a pure html/css implemention is the lack of ability to delay the time it takes to hide submenus.
It will happen instantly as the cursor removes focus from the menu and you will quite often find yourself "loosing" the menu as you tries to navigate down the menu tree.