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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
