ok so i'm what you could call a little bit "special" when it comes to javascript.

I've got a peculiar little problem in my head and I know how I want it to work but for the life of me I can't work out how or even find anything that will do what I'm after.

Basically I have a simple table based vertical menu which is very big (code for table at bottom)

What I want todo is have the <tr>'s with the in them hidden on page load.
When a user mouses over their "parent" table row I want them to expand downwards/appear and remain visible until a user mouses over the other parent row.

in the table below "Product Tour" on mouse over should display all the prepended rows directly beneath it. they should remain visible until the user mouses over "Product Editions" which should then display all the prepended rows directly below that heading and hide the product tour ones.

Anyone willing to help me with this little issue and if possible explain any code so I actually have a clue what you've done instead of just copy and pasting i'd like to know how it works too.

thanks alot

Code:
<table class="portalnav" border="0" width="200" cellpadding="5">
				<tr>
				<td bgcolor="#cccccc" background="images/nav_off.jpg" width="100%"><span class="portalnav"><strong>Products</strong></span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">Product Overview</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">Product Tour</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Sales Force Automation</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Marketing Automation</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Customer Support</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Collaboration</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Project Management</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Document Management</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Content Syndication</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Reporting</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> Tools &amp; Administration</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">Product Editions</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> SugarCRM Open Source</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#E6E6E6'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> SugarCRM Professional</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#E6E6E6" width="100%"><span class="portalnav"> SugarCRM Enterprise</span></td>
				</tr>
				<tr>
				<td bgcolor="#cccccc" background="images/nav_off.jpg" width="100%"><span class="portalnav"><strong>Services</strong></span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">CRM Consulting</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">SugarCRM Implementation</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">SugarCRM Customization</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">SugarCRM Support</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">SugarCRM Training</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">SugarCRM Campaigns</span></td>
				</tr>
				<tr>
				<td bgcolor="#cccccc" background="images/nav_off.jpg" width="100%"><span class="portalnav"><strong>Deployment Options</strong></span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">On Demand</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">Appliance</span></td>
				</tr>
				<tr>
				<td onclick="window.location='#'" onmouseover="this.style.backgroundColor='#000000';this.style.color='red';this.style.fontWeight='bolder';" onmouseout="this.style.backgroundColor='#cccccc'; this.style.color='black';this.style.fontWeight='normal';" bgcolor="#cccccc" width="100%"><span class="portalnav">On Site</span></td>
				</tr>
				</table>