Multi-level, bi-directional navigation

Firstly, I’d like to apologize for offending your eyes with this. I fully appreciate the inaccessibility issues this causes, not to mention it’s just simply a pain to use. That said, I have a client who is stubbornly insistent this is the way they want to go, and my efforts at talking them out of it have thus far failed.

I’m trying to create a menu with four levels:
Level 1: horizontal
Level 2: horizontal
level 3: drop (vertical)
level 4: flyout (horizontal)

This Superfish menu comes close, but is missing the 4th level.

This CSSPlay menu is the missing flyout, but hard-codes the width of the flyout menu options.

Can anyone suggest a way (either pure CSS or not) of creating the freaky offspring of the two, pictured below?

Thanks, and sorry again!

sooooooooooo ( and trust me I am a magnet for ignorant and stubborn clients) they want the fly out to be as long (wide) as the number of links it contains, or would a fix width fly out do?

Something like that! I’m happy if it breaks spectacularly so I can show them why it’s a bad idea, but I don’t think I’m going to convince them of it until I can give them something they can touch.

My assumption would be that the links simply continue going until they hit the edge of the site, then wrap. I guess I could work out the width using JS, but it’s ugly (ugly is relative at this point),
e.g. flyout.width = site.width - (drop.left + drop.width)

well see thats why I asked:

while “verbally” site width sounds right it would ONLY work if it’s flying out from the first menu choice AND if it doesn’t have that many links in the flyout UL. even if it works, it may cause a horizontal scroll bar ( since the menu might extend beyond the view port)

That deign said and all other rules working according to plan, try this:


<style>
ul{list-style:none; margin:0; padding:0}
 a {display:block; padding:5px;}
.thrd { background:silver; position:relative; width:100px; }
.frth {display:none;  float:right; width:1000px;  margin-right:-1000px; overflow:hidden}
.thrd:hover .frth {display:block;}
.thrd  a {float: left; background:silver; width:90px;  }
.frth  a {width:auto;  }
.frth  li {float: left;}
.clr{display:block; clear:both;}
</style>
</head>

<body>
	<ul>
		<li><a href="#"> first level</a>
               <ul>
                    <li><a href="#"> second level</a>
                         <ul>
                              <li class="thrd" ><a href="#"> third level</a>
                                        <ul class="frth">
                                             <li><a href="#"> fourth level</a></li>
                                             <li><a href="#"> for  fly out</a></li>
                                             <li><a href="#"> links</a></li>
                                             <li><a href="#"> links</a></li>
                                        </ul>
                                      <span class="clr"></span><!-- this is for IE, other wise you could use clearfx-->
                              </li>
                         </ul>
                    </li>
               </ul>
          </li>
	</ul>

Thanks. A valiant attempt. Unfortunately, I’m still seeing the fourth level menu items arranged vertically. See it in action.

yeah I figured there would be some specificity issues, not to mention numerical tweaks.

replace my CSS with this and it will work better


ul{list-style:none; margin:0; padding:0}
 a {display:block; padding:5px;}
.thrd { background:silver; position:relative; width:100px; }
.thrd ul.frth {display:none;  float:right; width:800px;  margin-right:-800px; overflow:hidden}
.thrd:hover  frth {display:block;}
.thrd  a {float: left; background:silver; width:90px;  }
 frth  a {width:auto;  }
.thrd ul.frth  li {float: left; width:auto}
.clr{display:block; clear:both;}