Abre el archivo estilo.css del sitio parquenatural y realiza los siguientes cambios:
Define el estilo general del menú, y los elementos en condiciones normales. Añade el siguiente código:
#menu { float: left; width: 100px; margin: 20px; padding: 0; list-style-type: none; } #menu li { border: #d3d3d3 1px solid; background-color: #CBE783; margin-bottom: 5px; font-size: 90%; text-align: center; line-height: 30px; } #menu a { display: block; text-decoration: none; color: #4F4F4F; }
Definiremos un estilo distinto que afecte a los elementos de la lista cuando tienen el cursor encima, utilizando la pseudoclase :hover. Añade el siguiente código:
#menu li:hover { border-color: #9F9F9F; background-color: #F6FFDF; } #menu li:hover a { color: #000; }
Por último, crearemos un estilo distinto para los elementos con clase activa, y asignaremos esa clase al elemento correspondiente a cada página. Además, como no queremos que este elementos cambien al pasar el cursor sobre él, definimos tambien el estilo cuando tiene el cursor encima:
#menu li.activa, #menu li.activa:hover { border: #d3d3d3 1px solid; background-color: #E5CDB2; } #menu li.activa a, #menu li.activa:hover a{ color: #000; }
Guarda todos los cambios.
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.