Lo más lógico sería tener solo una barra con el ancho de las dos, colocar
los enlaces y darles la imagen de fondo con el comportamiento que quieras.

<html>
<head>

<style>
* margin:0; padding0;
ul#barra {height: 100px; list-style:none;}
ul#barra li.a1, ul#barra li a.2{height:50px; line-height:50px; padding: 0
10px 50px 10px; }
ul#barra li.a1{color#000; background:url(a1.png)bottom left no-repeat;}
ul#barra li.a2{color#000; background:url(a1.png)bottom left no-repeat;}
ul#barra li.a1:hover{ color:#777; background:url(a1.png)bottom right
no-repeat;}
ul#barra li.a2:hover{ color:#777; background:url(a3.png)bottom right
no-repeat;}
</style>

</head>
<body>

<ul id="barra">
<li><a class="a1">Texto 1</a></li>
<li><a class="a2">Texto 1</a></li>
</ul>

</body>
</html>

Si te fijas el fondo en una es a la izquierda y por encima a la derecha...
es una imagen que contiene los dos comportamientos, ocuparía justo el doble
(100px de largo x 50px de ancho, pero solo se mostrará una de las dos
opciones).

Espero que te resulte de utilidad, sino en internet encontrarás mil
tutoriales... o alguien dará otra alternativa.



-- 
Salu2,
Eloi E.
www.estudi1073.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a