css nested ul navigation

[bendee]

I'm trying to convert my old site navigation to css /unordered lists, and cannot seem to find a way to do exactly what I want.

I would like to present the navigation as several adjacent columns with 3 or 4 items each. Ideally, this should be do-able without having to resort to several css lists in a table. The code should be one set of nested lists like this:

<ul id="navlist">
<li>Music Videos</li>
<ul id="subnavlist">

<li><a href="#">Hip Hop / Rap</a></li>
<li>R&amp;B / Soul</li>
<li>Pop / Dance</li>
<li>Electronic</li>
<li>Rock / Metal</li>
</ul>

<li>Movies</li>
<ul id="subnavlist">
<li>New this Week</li>
<li>Trailers / Reviews</li>
<li>Reel Deal TV</li>
</ul>
</ul>

I need advice on what css to use to display the main categories inline/adjacent, and display the subnav list items on separate lines within each category block.

Any help would be appreciated!

Thanks
Ben Davis

[edited by: Brett_Tabke at 10:07 pm (utc) on Mar. 27, 2004]

[encyclo]

Have you thought about using definition lists (dl) rather than nested lists? A dl will allow you to regroup items in categories, then you can style on whether you have a dt (definition term) or a dd. Something like:

<dl> 
<dt>Music Videos</dt> 
<dd>Hip Hop / Rap</dd> 
<dd>R&amp;B / Soul</dd> 
<dd>Pop / Dance</dd> 
<dd>Electronic</dd> 
</dl>

[mep00]

In Jan'04 WaSP listed an article [maxdesign.com.au] from Max Design about dl's. The following code is adapted from there.

HTML:

<div id="navlist">
<dl>
<dt>Music Videos</dt>
<dd><a href="#">Hip Hop / Rap</a></dd>
<dd>R&amp;B / Soul</dd>
<dd>Pop / Dance</dd>
<dd>Electronic</dd>
<dd>Rock / Metal</dd>
</dl>
<dl>
<dt>Movies</dt>
<dd>New this Week</dd>
<dd>Trailers / Reviews</dd>
<dd>Reel Deal TV</dd>
</dl>
</div> 

CSS:

dl
{
border: 1px solid #000;
padding: 10px;
float: left;
margin-right: 1em;
}
dt { font-weight: bold; }
dd
{
margin: 0;
padding: 0;
}

Note: I haven't tested this.

[bendee]

Thanks!
That's fantastic, with a couple of tweaks I got it to work... but I have only tested mac safari, ie5.2/mac, and firefox. Hopefully I can come up with a solution for older/incompatable browsers.

-bendee