Multiple Rows Navigation

using nested lists

[zackattack]

Hi - right heres a challenge if you are able to help...!

I need to use semantically correct mark up for a 5 sub level nested list which needs to appear visually as a horizontal navigation on the web page.

the mark up on the page is something like this:

<ul class="nav">
<li class="noTop"><a href="#">Home</a>
<ul class="nav1">
<li><a href="#">Bedroom</a></li>
<li><a href="#">Kitchen</a>
<ul class="nav2">
<li><a href="#">Cooker</a></li>
<li><a href="#">Fridge</a>
<ul class="nav3">
<li><a href="#">Tomatoes</a></li>
<li><a href="#">Carrots</a>
<ul class="nav4">
<li><a href="#">Red</a></li>
<li><a href="#">Crunchy</a></li>
<li><a href="#">Green Stalk</a></li>
<li><a href="#">Dirt</a></li>
<li><a href="#">Juce</a></li>
</ul>
</li>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Meat</a></li>
</ul>
</li>
<li><a href="#">Sink</a></li>
<li><a href="#">Microwave</a></li>
<li><a href="#">Cupboards</a></li>
<li><a href="#">Pantry</a></li>
</ul>
</li>
<li><a href="#">Garage</a></li>
<li><a href="#">Closet</a></li>
<li><a href="#">Cellar</a></li>
<li><a href="#">Loft</a></li>
</ul>
</li>
<li class="left"><a href="#">Services</a></li>
<li><a href="#">Garden</a></li>
<li><a href="#">Outhouse</a></li>
<li><a href="#">Pool</a></li>
<li><a href="#">Shrubs</a></li>
</ul>
</div>

In the CSS:

ul {
list-style: none;
}
#navWrap {
width: 100%;
}

ul li {
display: inline;
}

ul.nav,
ul.nav li ul li ul.nav2,
ul.nav li ul li ul li ul li ul.nav4 {
list-style: none;
float: left;
display: block;
width: 100%;
background: #666;
}

ul.nav li a,
ul.nav li ul li ul.nav2 li a,
ul.nav li ul li ul li ul li ul.nav4 li a {
list-style: none;
float: left;
display: block;
padding: .5em 1em;
background: #666;
color: #fff;
}
ul.nav li ul.nav1,
ul.nav li ul li ul li ul.nav3 {
list-style: none;
float: right;
display: block;
width: 100%;
background: #06c;
}

ul.nav1 li a,
ul.nav li ul li ul li ul.nav3 li a {
list-style: none;
float: right;
display: block;
padding: .5em 1em;
background: #06c;
font-weight: bold;
color: #fff;
}

The way I thought to tackle it is to use negative margins on the top to pull each item up into place. If I use positioning then everything is taken out of the flow of the document and scaling the layout (elastic 'em') layout up will mean the items that come after this navigation will not be pushed down...

any super intelligence would be REALLY welcome..

ZA

[Fotiman]

You might consider trying the Yahoo UI Library for this. They have a menu example that does this:
[developer.yahoo.com...]

Why re-invent the wheel? ;-)

[zackattack]

Hi Fotiman

This is not really an option, the nav needs to be horizontal and besides which must not use JS

thanks for taking a look though

ZA

[Fotiman]

The Yahoo UI has horizontal menus, but does require JavaScript.

If that's not an option... well, good luck. :-)

[Fotiman]

As for your original question...
What if you have only the nested lists use positioning? Thus, your main menu stays in flow.

[zackattack]

Thank yo for the reply Fotiman

unfortunately positioing was not an option because I needed to push the content below this naviagtion down, when the text was re-sized.

I appreciate your time and have to face the facts that this is not possible so will have to find another way

ZA

[Fotiman]

I think you misunderstand me.

pre content 
<ul id="root"> 
 <li>...</li> 
 <li>... 
   <ul> 
     <li>...</li> 
   </ul> 
 </li> 
</ul> 
post content 

For example, #root is not taken out of flow, but the nested list would be. Thus, post content would be pushed down below the list.