La tabla es así:
Código HTML:
<body>
<table width="768" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr><td>
<div id="menu">
<ul>
<li class="nivel1"><a href="es.html" class="nivel1 primera"><img src="img/es_0.gif" height="88" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie primera">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul id="primero">
<li><a href="es.html"><img src="img/es_1.gif" height="88" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="esta.html" class="nivel1"><img src="img/esta_0.gif" height="34" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="esta.html"><img src="img/esta_1.gif" height="34" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="te.html" class="nivel1"><img src="img/te_0.gif" height="34" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="te.html"><img src="img/te_1.gif" height="34" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="voldria.html" class="nivel1"><img src="img/voldria_0.gif" height="58" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="voldria.html"><img src="img/voldria_1.gif" height="58" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1"><img src="img/e_0.gif" height="36" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="escultures.html"><img src="img/e_1.gif" height="36" /></a></li>
<li><a href="escultors.html"><img src="img/e_2.gif" height="36" /></a></li>
</ul>
<li class="nivel1"><a href="#" class="nivel1"><img src="img/t_0.gif" height="36" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="taller.html"><img src="img/t_1.gif" height="36" /></a></li>
<li><a href="agenda.html"><img src="img/t_2.gif" height="36" /></a></li>
</ul><li class="nivel1"><a href="#" class="nivel1"><img src="img/imatge_sense_link.gif" height="29" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li></li>
</ul><li class="nivel1"><a href="vols" class="nivel1"><img src="img/vols_0.gif" height="63" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="vols"><img src="img/vols_1.gif" height="63" /></a></li>
</ul><li class="nivel1"><a href="#" class="nivel1"><img src="img/ensdones_0.gif" height="122" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="suportmoral.html"><img src="img/ensdones_1.gif" height="122" /></a></li>
<li><a href="suporteconomic.html"><img src="img/ensdones_2.gif" height="122" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td><div align="center" class="style1">© 2008 bla bla</div></td>
</tr>
</table>
<div align="center"><br />
<span class="style2">Bla bla <span class="style3"><a href="http://www.blabla.com" target="_blank">Bla bla</a></span></span></div>
</body> Y el css es el mismo que me cogí prestado, ligeramente modificado con lo que necesito:
Código HTML:
* {
margin: 0px;
padding: 0px;
outline: 0;
}
html, body {
width: 768px;
border: 0;
}
body {
background: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {
font-size: 0.7em;
margin: 15px;
width: 164px;
}
#menu ul {
list-style-type: none;
}
#menu ul li a.nivel1,
#menu ul li a.nivel1ie {
width: 164px;
}
#menu ul li a.primera {
}
#menu ul li a {
text-decoration: none;
color: #fff;
}
#menu ul li:hover {
position: relative;
color: #000;
}
#menu ul li a:hover,
#menu ul li:hover a.nivel1 {
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul,
#menu ul li:hover ul {
display: block;
position: absolute;
top:-1px!important;
top: -22px;
left:150px!important;
left: 152px;
width: 800px;
}
#menu ul li a:hover ul
#primero,
#menu ul li:hover ul
#primero {
top:0px!important;
top: -22px;
}
#menu ul li ul li {
display:inline;
}
#menu ul li ul li a {
width: 320px;
float: left;
color: #000;
margin-left: -2px;
}
#menu ul li ul li a:hover {
position: relative;
color: #FFF;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
El centrado de la tabla me gustaría que fuese tanto vertical como horizontal, es decir, que quede justo en el centro del navegador tanto si éste es más grande como más pequeño, aunque el tamaño de la tabla es fijo.
Por otro lado, me encuentro con el problema de que las imágenes que quiero poner en las diferentes opciones no son todas del mismo tamaño, y claro, hay alguna que se me solapa con otra porque todas tienen la misma medida en el css. ¿Debería realizar otro css para estos casos donde las medidas son diferentes (sólo me pasa en un caso) o existe alguna manera de arreglarlo?
Muchas gracias, una vez más.
?.
Respuesta: Implementar un rollover 
