CSS and Javascript for navigation Table

Can some please tell me what I am doing wrong.

I am trying to create a navigation table on the left of the screen using a table.

I have positioned the table using CSS in an external file.

I then want to use a mouseover event [javascript] to change the background color of the cells in the table, and change the visibility of a second table to visible.
This works when there is No Class assigned to the cell, but when I add a class (as follows) it no longer works? Can someone tell me why and how to fix the problem. The codes are attached below.

Thanks,
Wedgetail

CSS File
#MainMenu{
z-index: 2;
position: absolute;
top: 120px;
left: 0px;}
.TCell{ background-Color: #B31111;
height: 40px;
width: 100px;}

HTML Code
<DIV id="MainMenu">
<TABLE id="Main">
<tr><td Class="TCell" align=center onmouseover"mover(0)"
onmouseout="mout(0)">
Menu Item 1</td></tr>

<tr><td Class="TCell" align=center onmouseover"mover(1)"
onmouseout="mout(1)">
Menu Item 2</td></tr>
</TABLE></DIV>

JAVASCRIPT
function mover(src){document.getElementById('Main').tbodies [0].rows[src].cells[0].bgcolor = '#CC5555';}

function mout(src){document.getElementById('Main').tbodies[0].rows[src].cells[0].bgcolor = '#B31111';}

My javascript isn't really good, but have you considered implementing a 'a:hover' in your stylesheet? Might do the same trick.

Good luck

Do as Itsacon says, javascript and tables are no good for menus. Use lists and CSS instead. You find several premade solutions here:
http://css.maxdesign.com.au/index.htm