Listado completo

Clase 12 - Menu Css

Para empezar el ejercicio12 nos descargaremos aquí la estructura del ejercicio. Una vez descomprimido copiaremos su contenido dentro de nuestra carpeta de ejercicio10 en el apache (hacedlo desde eclipse). Esto nos pedirá sobreescribir dos archivos (dos imagenes) le decimos que aceptar.

¡OJO!, para este ejercicio hay que tener en cuenta varias cosas:

  • 1. No se debe cambiar nada del html
  • 2. El menú no debe moverse ningún pixel cuando se haga over sobre él.

Recomendaciones:

  • 1. Hacerlo por bloques, primero maquetar todo el menú con las opciones interiores visibles y una vez que se vea perfecto con todo desplegado empezar a interactuar con los :over y los displays para esconderlos.
  • Estos dos selectores nuevos os serán de gran ayuda --> :first-child y :last-child http://quirksmode.org/css/selectors/firstchild.html

Si no viniste a clase, recuerda que tienes apoyo y ejemplos en la zona CSS del canal de desarrollo web en you tube aquí.

La solución al ejercicio la tenéis resuelta aquí.

Se puede ver el resultado final funcionando completo aquí.