Vertical Navigation flyout 5 deep CSS

I have a nightmare of a client that wants this indepth idiotic navigation system on his website... it is basically this web of mouse overs and nested tables.. I found something that I like but cannot seem to get it to function past the first tier:

http://www.alistapart.com/articles/horizdropdowns

the issue is that once the user mouses over the first visible object, every sub table shows up as opposed to the first level, then the next, then the next and so on and so forth....

I like this script for the small size and easy to understand concept in case he wants to */shudder/* augment the table himself....

Any help would be greatly appreciated.

I'm not entirely sure this can be achieved through css. I don't think css fly-outs allow for more than one tier. I would suggest looking into a javascript alternative. I'll play around with it and see if I can come up with a solution in css, but it isn't likely.

okay, got it set.
Sub menu's with css

you could essentially go as deep as you want with this method.

Take a look at the source, I commented pretty thoroughly. If you have any questions let me know

tested and working in chrome 2, opera 9, IE7, IE8, Firefox

This css will not interfere with any other elements on the page. Use unordered lists to achieve the structure of your menu, and then add a class name of "navigation" to the top level <ul> tag of the navigation menu. Again, you can add as many embedded ul tags within li tags as you need and this code should work seamlessly with all elements inside of a list with the "navigation" classname.

Sweet, just utter perfection... thank you sir!

this is weird.. it is not functioning in IE7 very well.. seems like when you mouse to the right too quickly the menu collapses and disappears... any suggestions?

I've had really good experience with the CoolJSMenu (I don't know if linking to it is allowed, google it). I've used it on several projects and it works great.

i would prefer not to have to buy anything for something so painfully simple (so it seems)

It's a free script, unless you want the Pro version. The free script will do everything you want to do.

hmmm, not sure why it wouldn't be working, it works on my comp under IE7. I'll take another look at it and see what I can come up with.

okay, did some research. Sorry for taking so long. I believe it's because of the wrapping comment tags "<--" and "-->" inside the stylesheet area. Just under the <style> tag and above the closing </style> tag. In IE7 the child combinator ">" becomes a bit buggy when proceeded with comment. Remove the <-- and --> in the stylesheet and it should work.