Ayuda ejercicios unidad 8: Menús


Solución al ejercicio

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.

Inicio





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.