problemas con el menu horizontal

[WinderJerter]

hola que tal, les cuento que ando realizando un menu horizontal para mi web (xboxlatino.byethost10.com/) y lo quiero modificar... por sierto me estoy basando en el ejemplo de (documentoweb.com/CSS/Ejemplos/Menu-desplegable-1.html) y lo que pasa esque ese menu utiliza en div menu que en mi caso se llama navigation y nivel1 los mismos colores tanto cuando no esta ensima el maus y cuando esta

aqui les dejo el codigo css der archivo.. es el mismo del ejemplo pero yo lo acomode

Código:

#navigation {
	font-size:0.7em;
	text-align:center;
	width:696px;
}

#navigation ul {
	list-style-type:none;
}

#navigation ul li.nivel1 {
	float:left;
	width:174px;
}

#navigation ul li a {
	background-color:#399;
	color:#fff;
	display:block;
	padding:8px;
	position:relative;
	text-decoration:none;
}

#navigation ul li:hover {
	position:relative;
}

#navigation ul li a:hover, #navigation ul li:hover a.nivel1 {
	background-color:#6cc;
	color:#000;
	position:relative;
}

#navigation ul li a.nivel1 {
	display:block!important;
	display:none;
	position:relative;
}

#navigation ul li ul {
	display:none;
	left:0;
	position:absolute;
}

#navigation ul li a:hover ul, #navigation ul li:hover ul {
	display:block;
}

#navigation ul li ul li a {
	padding:6px 0 8px 0;
	width:174px;
}

#navigation ul li ul li a:hover {
	position:relative;
}

y lo que kiero conseguir que los colores de navigato y los del nivel1 sean diferentes tando en a como en a:hover... no se si se llame asi, espero que me puedan ayudar.

saludos y gracias de antemano

[mayid]

Y cual es el problema? Es que no sabes identificar que es que?

La estructura es esta:
<ul> // grupo de botones primarios
<li>
<ul> <li> </li></ul> // grupo de botones secundarios
</li>

<li>
<ul><li> </li> </ul> // grupo de botones secundarios
</li>
<li> </li> // boton solo
</ul>

O sea que a tu css le tenes que cambiar el background para el nivel secundario:

#navigation ul li a {background: #222} // nivel primario

#navigation ul li ul li a {background: #456} // nivel secundario

Tambien podes cambiar el color de las letras con a:hover

#navigation ul li a:hover {color: white} // nivel primario
#navigation ul li ul li a:hover {color: blue} // nivel secundario

En fin:
"background" para el color de fondo.
"color" para el de las letras.

[WinderJerter]

Iniciado por mayid

Y cual es el problema? Es que no sabes identificar que es que?

La estructura es esta:
<ul> // grupo de botones primarios
<li>
<ul> <li> </li></ul> // grupo de botones secundarios
</li>

<li>
<ul><li> </li> </ul> // grupo de botones secundarios
</li>
<li> </li> // boton solo
</ul>

O sea que a tu css le tenes que cambiar el background para el nivel secundario:

#navigation ul li a {background: #222} // nivel primario

#navigation ul li ul li a {background: #456} // nivel secundario

Tambien podes cambiar el color de las letras con a:hover

#navigation ul li a:hover {color: white} // nivel primario
#navigation ul li ul li a:hover {color: blue} // nivel secundario

En fin:
"background" para el color de fondo.
"color" para el de las letras.

oks muchas gracias mayid te debo una +karma

gracias y saludos

[cristian_cena]

Hola WinderJerter:

Tu tienes un anidamiento algo así:
#navbar #navigation ul .class11 ul li a

Lo que seria en body algo así:

<div id="navbar">
<divid="navigation">
<ul>
<li class="class11">
<ul>
<li>
<a></a>
</li>
</ul>
</li>
</ul>
</div>
</div>


#esto_es_una_id y sirve para referirte a un elemento, debe ser única. En body tendras algo así <etiqueta id="esto_es_una_id">

.esto_es_una_clase y sirve para referirte a un elemento, puedes aplicar una clase a varios elementos. En body tendras algo así <etiqueta class="esto_es_una_clase">

Bueno, cambiar el estilo es simple si sabes como referirte a los elementos de tu menú en <style>

Si quieres cambiar por ejemplo el color de fondo de #navigation entonces lo buscas dentro de las etiquetas <style> e incluyes la propiedad background-color: aquí el color que tu quieras (white, #fff por ejemplo);

Pues tu tienes:

#navigation {
font-size:0.7em;
text-align:center;
width:696px;
background-color:black;/*tu color*/
}

pero recuerda que css son estilos en cascada, por lo que la cascada "bañará" tus elementos de lo general a lo particular:
(Esto se conoce como herencia y te será útil buscarlo en google o libros.es )

Por ejemplo:

#navigation ul li a {
background-color:#339999;
}

es más particular que:

#navigation {
font-size:0.7em;
text-align:center;
width:696px;
}

Eel color verde de fondo(#339999) está en un último nivel pero si lo pondrías en #navigation esta propiedad se aplicaría también a #navigation ul li a ¿me explico?

:hover es una pseudo-clase, la tienes definida así:

#navigation ul li ul li a:hover {
position:relative;
/*modificala a tu gusto con la propiedad que quieras*/

}

Bueno, una respuesta general para una pregunta general, espero te sirva y no haberte aburrido.

Si quedan dudas pregunta y te ayudamos

Saludos!

[cristian_cena]

como puede ser cuando empeze a escribir mayid no había respondido aún. Tendré que hacer un curso de esos de 3000 palabras por minuto

[WinderJerter]

hahaha no importa , pero gracias por tu respuesta tambn la tomare en cuenta para complementarla con la info de mayid

saludos y muchas gracias

[cristian_cena]

ha-ha-ha (con risas de nelson) jaja, aca estaré para lo que pueda ayudarte WinderJerter

Saludos!