display states in IE7/FF: elements under others.

[hominidx]

I need help seeing what's screwing up in a little thrown together navigation:
(oops, sorry - URL deleted)
It's all onClick events which are supposed to open and close similar to a file tree, and then close out all of other top level options whenever another top level choice is clicked.
It uses simple a simple Show/Hide script to toggle the display state of the secondary navigation layers from display: none to display: block and back.
The elements of the navigation are made up of unordered lists <ul> and list-items <li>

Simple,right?

Well, I was happily pretending like I knew what I was doing in IE6, and while it's code-ugly, it did the job.
But now looking at it in IE7 and FF, the display of the sub-navigation layers seem to essentially open behind the main navigation. If you click "Dentists:, it essentially works right, but then see the problem as you click "Agents/Brokers", "Purchasers" and so on - above a certain point, it looks like nothing is happening.

Any hints or ideas what may be going wrong here?
I'm not necessary asking for anyone to reshape the code, but a poke for my cobwebby brain may help out here, including outright faults in my code/styles and/or esoteric problems in IE7 and FF.

(oops, sorry - URLs deleted)

Thank you for giving this a look. If there's another preferred format for me to present this code in these forums, please let me know! :)

[edited by: hominidx at 5:10 am (utc) on Feb. 16, 2007]

[hominidx]

OK, changing the question to match the TOS better :)

The issue is that I have a leftnav set up like this:

<ul id="nav">
<li class="isParent" id="newsroomParent"><a href="#" onclick="clChgMenu();" >&nbsp;Newsroom</a>
<ul class="hide" id="newsroom">
<li><a href="news_releases.html" onclick="javascript: window.location='news_releases.html';">&nbsp;News Releases</a></li>
<li><a href="#">&nbsp;Media Kits</a></li>
<li><a href="#">&nbsp;Media Contacts</a></li>
</ul></li>
<li class="isParent" id="enrollParent"><a href="#" onclick="clChgMenu2();" >&nbsp;Enrollees</a>
<ul id="enrollees" class="hide">
<li><a href="#">&nbsp;Enrollees 1</a></li>
<li><a href="#">&nbsp;Enrollees 2</a></li>
<li><a href="#">&nbsp;Enrollees 3</a></li>
</ul>
</li>
<li class="isParent" id="purchasersParent"><a href="#" onclick="clChgMenu3();">&nbsp;Purchasers</a>
<ul class="hide" id="purchasers">
<li><a href="#">&nbsp;Benefit Manager Toolkit</a></li>
<li><a href="#">&nbsp;Find a Dentist</a></li>
<li id="submenuParent" onclick="showHide();" class="submenuParent"><a href="#" class="isParent2">&nbsp;Choosing Coverage</a>
<ul id="submenu2" class="hide">
<li><a href="#">&nbsp;Step 1. Choose a Plan</a></li>
<li><a href="#">&nbsp;Step 2. TBD</a></li>
<li><a href="#">&nbsp;Step 3. Request a Proposal</a></li>
</ul>
</li>
<li><a href="#">&nbsp;Managing Coverage</a></li>
<li><a href="#">&nbsp;Newsletters</a></li>
<li><a href="#">&nbsp;Information to Share</a></li>
</ul></li>
<li class="isParent" id="agentParent"><a href="#" onclick="clChgMenu4();" >&nbsp;Agents/Brokers</a>
<ul class="hide" id="agentsBrokers">
<li><a href="#">&nbsp;Agent/Brokers 1</a></li>
<li><a href="#">&nbsp;Agent/Brokers 2</a></li>
<li><a href="#">&nbsp;Agent/Brokers 3</a></li>
</ul>
</li>
</ul>

It operates with onClick -- the functions simply toggle the classNames of the secondary ul's between show and hide.
The problem is when they switch to 'show' (which is simply defined as 'display: block;') - if they are above the very bottom of the nav, they appear behind the elements below them. The intended function is that they push down the rest of the nav so the secondary elements can be seen and clicked.

Sorry for the initial faux pas, and hopefully this will be clear enough of a description to talk through the problem.