Menú Simple CSS

[bathory84]

Hola que tal muchachos yo tengo un Menú Flash pero ahora estoy tratando de hacerlo en CSS simple pero no puedo lograrlo pues no es mi fuerte. Quisiera que el Menú quedara como la siguiente Imagen:



Todavía no puedo lograr que el :hover sombreé todo el cuadro (columna) asi como les dejé la imagen de ejemplo (Boton Servicios), esos fondos azules son imagenes. Solamente sombrea de azul las Letras y no me sirve así.

AQUI LES DEJO EL HTML DEL MENÚ:

Código HTML:

<table width="964" height="40" border="0" class="fondotabla">
  <tr>
 
    
    <th class="izquierda" scope="col">
    <a href="index.html">    Principal    </th>
    
    <th class="centro" scope="col">
    <a href="nosotros.html">    Nosotros    </th>
    
    <th class="centro" scope="col">
    <a href="servicios.html">    Servicios    </th>
    
    <th class="centro" scope="col">
    <a href="presupuestos.html">    Presupuestos    </th>
    
    <th class="centro" scope="col">
    <a href="testimonios.html">    Testimonios    </th>
    
    <th class="derecha" scope="col">
    <a href="contactos.html">    Contactos    </th>
    
    
  </tr>
</table>
 

AQUI LES DEJO EL CSS DEL BOTÓN "PRINCIPAL":

Código CSS:

.izquierda {
    height: 40px;
    width: 162px;
    font-family: "Arial";
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    color: #000;
    vertical-align: middle;
}
 
 
.izquierda :hover{
    background-image: url(../images/izquierda.png);
    width: 162px;
    height: 40px;
    font-family: "Arial";
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    color: #FFF;
    vertical-align: middle;
}
 

Por favor ayudenme a terminarlo, es para mi pagina personal de trabajo.