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>