Menu CSS con estados

[juampick]

Hola, que tal? Estoy tratando hace unos días de modificar un poco los colores de mi menu css pero no lo he logrado. He creado una clase "selected" para ponersela en cada sección del sitio correspondiente. Acá va el código así comprenden mejor:

Html:

Código:

<div id="buttons">
<ul>
<li><a href="/">Historia</a></li>
<li><a href="/">Contacto</a></li>
<li><a href="/">Recursos</a></li>
<li><a href="/">Links</a></li>
<li><a href="/">Galería</a></li>
<li class="selected"><a href="/">Inicio</a></li>
</ul>
</div>

Css:

Código:

#buttons {
padding:1em;
height:1.5em;
color:#ffffff;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
}
#buttons li a {
display:block;
padding:0 5px;
font-size:1.2em;
font-weight:normal;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
#buttons .selected {
color:green;
text-decoration:none;
}

#buttons a:hover{
color:red;
text-decoration:none;
}

El problema es que no me funciona la clase selected, le puse color:green como para ver la diferencia pero no anda.
Espero que me puedan ayudar.

Saludos Y Muchas gracias

PD: www.cincomasdos.com.ar/DEMO2/index.html

[daPhyre]

Creo que debes dar la clase a la ancla, pues está dentro del li, y por tanto sus características lo sobreescriben. Suerte!

[juampick]

Iniciado por daPhyre

Creo que debes dar la clase a la ancla, pues está dentro del li, y por tanto sus características lo sobreescriben. Suerte!

He probado cambiando a

Código:

#buttons li a .selected {
color:green;
text-decoration:none;
}

pero no se soluciona. Alguna ayudita??

[daPhyre]

Me refería a esto:

Código HTML:

<li><a class="selected" href="/">Inicio</a></li> 

Y otro detalle, no se muy bien como funcionen las clases dentro de los identificadores. Si no funciona, prueba primero sin todo lo que precede a .selected en el CSS. Suerte!

[Mikmoro]

Iniciado por juampick

He probado cambiando a

#buttons li a .selected {
color:green;
text-decoration:none;
}

pero no se soluciona. Alguna ayudita??

Hola, juampick.

Está mal puesto. Debe ser

#buttons li.selected a {
color:green;
text-decoration:none;
}

Pruébalo a ver.

Mikel.

[juampick]

Iniciado por Mikmoro

Hola, juampick.

Está mal puesto. Debe ser

#buttons li.selected a {
color:green;
text-decoration:none;
}

Pruébalo a ver.

Mikel.

Increible, perfecto Mikel!
Ando hermoso. Ahora entiendo por qué no funcionaba era un "pequeñísimo error". Otra consultita: se puede hacer que en el hover haya como una especie de transición entre 2 colores en loop?? .
Espero que me entiendas.

Gracias

[Mikmoro]

No, lo siento, no sé qué quieres decir.

Mikel.

[juampick]

Disculpa mi falta de expresión. Quiero saber cómo se puede hacer para modificar mi boton para que sea igual que ahora solamente que en el estado hover en vez de ser asi:

Código:

#buttons a:hover{
color:red;
text-decoration:none;
}

realice en vez de un cambio de color a red haga una transición de colores, es decir vaya entre un amarillo y azul por ejemplo. Me explico ahora?
Hay alguna forma? o tendría que realizarlo con imagenes?

Saludos y muchas gracias por el interés

[Mikmoro]

No lo sé al cien por cien, pero estoy casi seguro de que no es posible. Eso tendrías que hacerlo con un gif, en el que hagas la transición en dos o más escenas.

Mikel.