position: relative;

I kind of stumbled into this today and it’s working nicely for me in FF, IE7, Safari and Opera.

Here’s the example page.

Step-by-step:

1. Set up a simple unordered list with multiple levels (mine has two, but you could use more with a little work).

2. Here’s the HTML for the menu section (refer to the example for the full code). Note that you need to put an ID on each of the ul li ul’s.

<div class=”nav”>
<ul>
<li><a href=”expanding_menu_problems.html”>Your Problems</a>
<ul id=”menu-problems”>
<li>Issue 1</li>
<li>Issue 2</li>
<li>Issue 3</li>
</ul>
</li>
<li><a href=”expanding_menu_solutions.html”>Our Solutions</a>
<ul id=”menu-solutions”>
<li>Solution 1</li>
<li>Solution 2</li>
<li>Solution 3</li>
</ul>
</li>
<li><a href=”expanding_menu_studies.html”>Our Case Studies</a>
<ul id=”menu-studies”>
<li>Case Study 1</li>
<li>Case Study 2</li>
<li>Case Study 3</li>
</ul>
</li>
</ul>
</div>

3. Style the list any way you like, but the important parts to remember are to (1) give all the ul li ul’s display: none; and (2) then add in, one for each ul li ul, something like this:

#problems #menu-problems {
display: list-item;
}

4. Now on the body tag, add an ID: ‘body id=”problems”‘ for the first page. On each page, do the same for each different ul li ul you’ve created.

That’s it. When you visit each page, the CSS in step 3 will toggle the display of the ul li ul associated with the body tag and only that one’s contents will display.

Please if you have any problems with this, ask. I just typed this up quickly because, of course, I’m on a deadline.