mudar fundo da celula

[Lafey]

Olá pessoal, estou fazendo um site e não estou conseguindo fazer um menu com CSS. O menu é uma tabela com 8 células, quando passar o mouse sobre a célula ela muda de cor, até ai beleza, consegui com CSS. O problema é que usando esse código quando eu carrego o site ele já ve com a cor na célula como se o mouse estivesse sobre a celula... Segue o código.

CSS

.mudacorum {

    background-color: red;

}

.mudacordois {
    
    background-color: white;

}

HTML

<table width="100%" class="tabelaprincipal">
<tr>
<td height="100px" colspan="8">banner</td>
</tr>
<tr>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">1</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">2</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">3</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">4</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">5</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">6</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">7</td>
<td class="mudacorum" onmouseover="this.className='mudacorum'" onmouseout="this.className='mudacordois'">8</td>
</tr>
</table>

Sacaram? Quando eu abro o site ele já fica com a cor vermelha de fundo, mesmo sem o mouse lá... Como faço pra deixar branco por padrão e só quando o mouse fica sobre a cor mudar pra vermelho?

Abraços...

Editado Maio 9, 2009 por Lafey

[Eliseu M.]

você se confundiu lgl no código, você trocou mudacorum por mudacordois e vice-versa. Código funcionando:

<style>
.mudacorum {
background-color:white;
}
.mudacordois {
background-color:red;
}
</style>
[/codebox]

[codebox]<table width="100%" class="tabelaprincipal">
<tr>
<td height="100px" colspan="8">banner</td>
</tr>
<tr>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">1</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">2</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">3</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">4</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">5</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">6</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">7</td>
<td class="mudacorum" onmouseover="this.className='mudacordois'" onmouseout="this.className='mudacorum'">8</td>
</tr>
</table>

Abraços.