Hola:
Prueba este código.
1º- El CSS:
Código:
.menu {
margin:0;
list-style:none;
height:35px;
background:#fff url(graficos/imagen-uno.gif);
position:relative;
border-bottom:1px solid #000;
}
.menu li {
float:left;
}
.menu li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#aaa;
text-decoration:none;
font-size:11px;
font-family:verdana, arial, sans-serif;
font-weight:bold;
text-align:center;
padding:0 16px;
}
.menu li a:hover {
color:#fff;
background:#000 url(graficos/imagen-dos.gif);
}
2º- El HTML:
Código HTML:
<ul class="menu">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
<li><a href="#">Opción 5</a></li>
<li><a href="#">Opción 6</a></li>
<li><a href="#">Opción 7</a></li>
</ul> Lo que tienes que cambiar es:
Código:
background:#fff url(graficos/imagen-uno.gif);
por la imagen que tu quieras poner como fondo del menú y
Código:
background:#000 url(graficos/imagen-dos.gif);
por la imagen cuando el ratón se posicione encima del botón.
Espero que te sirva de ayuda.
Un Saludo.
P.D.: Olvídate de hacer la maquetación web con tablas eso se usa para tabulación de datos.