CSS deslizando el borde

Gracias a codeSpy, tengo esto: http://jsfiddle.net/p9tBR/

Lo que no puedo entender es cómo cambiar la línea azul cuando cambio páginas. Por ejemplo, si estoy en la página 2, quiero que la línea azul esté debajo del 2 en lugar del 1. Cuando estoy en la página 2-4, la línea vuelve al 1. Lo siento, soy horrible en explicando esto así que aquí hay una foto.

1

HTML:

CSS:

 body { font-family: sans-serif; } ul { padding: 0; position: absolute; left: 50%; width: 500px; margin: 0 0 0 -250px; list-style-type: none; } ul:hover > span { background: #d0332b; } ul { margin-top: 50px;} ul li { font-weight: bold; width: 25%; float: left; padding: 7px 0; text-align: center; cursor: pointer; } ul li:hover { color: #d0332b; } ul li:nth-child(2):hover ~ span { left: 25%; } ul li:nth-child(3):hover ~ span { left: 50%; } ul li:nth-child(4):hover ~ span { left: 75%; } span { position: absolute; bottom: -42px; display: block; width: 25%; height: 7px; background: #00b6ff; } ul li, span { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; position: relative; } a { text-decoration: none; color: #232323; } a:hover { display: block; color: #d0332b; } 

CSS interesante, no visto como hecho antes.

Si agrega un estado flotante para el primer enlace también:

 ul li:nth-child(1):hover ~ span { left: 0%; } 

y agrega una clase “activa” para la pestaña actual, entonces funciona bastante bien. Los nombres de clase “inactivos” son obligatorios para que el estilo .active no anule los estilos :hover .

 
ul li.active:nth-child(1) ~ span, ul li.inactive:nth-child(1):hover ~ span { left: 0%; } ul li.active:nth-child(2) ~ span, ul li.inactive:nth-child(2):hover ~ span { left: 25%; } ul li.active:nth-child(3) ~ span, ul li.inactive:nth-child(3):hover ~ span { left: 50%; } ul li.active:nth-child(4) ~ span, ul li.inactive:nth-child(4):hover ~ span { left: 75%; }

http://jsfiddle.net/p9tBR/4/