Advanced Multi Tier Navigation across columns

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.

Related Posts: