MMM intento así:
#secciona a {
outline: 0;
display: block;
width: 210px;
height: 144px;
text-indent: -9999px;
}
#secciona a:hover {
background-position: -210px;
}
#rolloversecciona {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}
#rolloversecciona2 {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}
#rolloversecciona3 {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}
y con este html:
<ul id="menuimg">
<li id="secciona-link"><a id="rolloversecciona" href="#"></a>
<a id="rolloversecciona2" href="#"></a>
<a id="rolloversecciona3" href="#"></a></li>
</ul>
Pero dudo que aquí haya nada correcto. Sobre todo los <a id> finales del html, supongo que sólo debería haber uno... Confusing...