Advanced Multi Tier Navigation across columns

Question

I've been struggling with this for a while now and need some help. I'm trying to create a quite specific navigation setup for a client.

I have a top level navigation which is hard coded and not a problem. The second level of navigation should populate the left sidebar of the site, it should also show a third level of nestled/folding navigation within it. The fourth level of navigation is then shown separately in a column next to the left sidebar.

The illustration below or this image example should help explain:

------------------------------------------------------------------------
| topNav | topNav | topNav | topNav | topNav | topNav | topNav | topNav |
------------------------------------------------------------------------
| childNav01  v | greatgrandchild > | Content Goes Here                 |
|---------------|-------------------|                                   |
| grandchild    | greatgrandchild   |                                   |
|---------------|-------------------|                                   |
| grandchild    | greatgrandchild   |                                   |
|---------------|-------------------|                                   |
| grandchild  > | greatgrandchild   |                                   | 
|---------------|-------------------|                                   |
|               |                   |                                   |
| childNav02    |                   |                                   |
|---------------|                   |                                   |
| childNav03    |                   |                                   |
|---------------|                   |                                   |
| childNav04    |                   |                                   |
|---------------|                   |                                   |
|_______________|___________________|___________________________________|            

The issues I'm having is no solution I've come across can do all of these things.

In an ideal world I'd love to have one dynamic template rather than having lots but any help would be great.

Answer 1

Took a decent amount of tinkering, but I came up with something workable based around absolute positioning, I did not apply any hover actions, those should be relatively easy for you to do (don't forget to z-index). Here's the CSS I would use:

#m {
    list-style: none;
}
#m > li {
    padding: 15px;
    float: left;
}
#m .sub-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 300px;
}
#m .sub-menu .sub-menu {
    position: static;
}
#m .sub-menu .sub-menu .sub-menu {
    position: absolute;
    width: 200px;
    top: 0;
    left: 300px;
}
#m .current-menu-ancestor > .sub-menu {
    display: block;
}
#m .current-menu-parent > .sub-menu {
    display: block;
}

#m is your menu holder, you can set that to whatever, the rest is default from wordpress, so you can't change that around too much without going to a custom walker or something...but why would you do that? Anyways, if you need help with the hover actions or anything, let me know.