8th November 2007
Using my latest techniques, this is about as simple as I can make it whilst still getting it to work across as many browsers as possible.
The menu is just a set of unordered lists with a single top level id, and not a single class used.
The stylesheet could have been as small as 12 lines if it were not for IE5.x and IE6.
Hovering over the top level links will cause the first sub menu items to drop down. This also includes my newly found method of allowing the sub menus to find their own width based on the link lengths and has the flyout levels offset to give a small overlap on the list item from which they flyout. IE5.x and IE6 however will not play ball with this method and have slightly different styling so that the flyouts are next to the end of the previous levels text.
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Safari (iPod Touch). Mozilla and Netscape in Firefox mode have a small problem with this one, as does the latest alpha release of Opera.
Because IE5.x and IE6 do not recognise the child selector '>' I have added the extra styling necessary for these two browsers to show the path followed though the menu.