El menú no se mueve

[ataide]

Tngo este menu en la parte superior:



Y éste es el código CSS:

ul.menu
{
height: 20px;
color: #ffffff;
font-size: 20px;
font-family:Tahoma, Geneva, sans-serif;
margin: 0 0 0 0;

}
ul.menu li
{
position:relative;
width:120px;
font-size: 12px;
color: #000000;
padding: 2px 0px 1px 0px;
margin: 0 0 0 0 ;
}
ul.menu ul
{
position:relative;
left:0px;
top:50px;
width: 130px;
display:none;
padding: 2px 0px 2px 0px;
color: #ffffff;
}
ul.menu li:hover > ul
{
display:block;
background: #b8bfc5;
opacity: 0.6;


}

ul.menu li:hover
{
background: #b8bfc5;

}

ul.menu> li > ul
{
position:absolute;
left:0px;
top:-50px;
display:none;
list-style:none;
}
ul.menu > li
{
display:inline;
color: #ffffff;
font-size: 16px;
padding: 0px;
color: #ffffff;
}

No soy capaz de bajar el menú unos 150 píxeles más abajo. Haga lo que haga no se mueve. ¿En qué me estoy equivocando?

Muchas gracias.

Un saludo!

[kseso?]

EDITO: creo que entendí mal qué quería desplazar
Porque no le está indicando posición a la lista que se despliega al :hover
Ajuste al gusto (px más o px menos) los valores top y left, tal que así:

Código CSS:

ul.menu li:hover > ul {
background:none repeat scroll 0 0 #B8BFC5;
display:block;
opacity:0.6;
top:10px;
left:0;
z-index:20;
}
 

Corrijo mi apreciación inicial. Tiene múltiples selectores que le afectan. Uno de ellos en la línea 152 /ul.menu > li > ul/ donde le indica /top:-50px/

Debería optimizar y depurar un poco su css.
Declaraciones como

Código CSS:

body {
background:url("imagenes/fondo.jpg") repeat-x scroll 0 0 #A09E92;
margin:0 0 200px 200px;
 
}
#centro {
background-color:#FFFFFF;
margin:7px 5px 20px 20px;
width:727px;
}
 

Puede que le arregle algo en una resolución muy concreta y precisa, pero en el resto de los casos, serán una fuente de problemas. Creo.

[mayid]

Esta es mi solución (aunque no creo que sea crossbrowser, porque al definir un margen de 160px puede haber divergencias):

#cabecera {
position: relative;
background-image: url(imagenes/cabecera.jpg);
width:710px; height:190px; margin: 0 0 5px 7px;
}

#menu { position: absolute; margin-top: 160px;}

También habrías de poner un reseteo. Para no tener que quitarle a cada elemento el margin por defecto:
* {margin: 0, padding: 0}



Habrías de ver otras cosas. Tenes una doble llave en input.check . Me refiero a }}

En el mismo lugar, definis font-color. Eso no existe. Con que definas color ya alcanza:
font-color: #00C4F4;
color: #2B92DD;

Por último, Firebug me muestra que tenes un id repetido:
<div id="TextoInicio">

[ataide]

Sí, pero a eso no me refería.

Me refiero a mover el menú hacia abajo, no los submenús como me has explicado. Donde pone Inicio y eso, pues ponerlo en la parte inferior de la cabecera.

Espero haberme explicado bien.

Edito: Exacto mayid, a eso me refería.

Muchísimas gracias a los dos por vuestra ayuda. CSS no es mi fuerte, pero ahí intento aprender jejeje...

Un saludo!!

[kseso?]

Creo que le hemos hecho un flaco favor, pues le hemos corregido una cuestión puntual, pero no hemos evitado que en el futuro, ante el mismo problema en una situación semejante, pueda comprender dónde radica y cómo actuar.
Así que le invito a leer este artículo, obra de Mikel Morote. Ya le enlazo la parte que aplica.

Atentamente

[ataide]

Gran artículo, añadido a mis favoritos.

No dudes que lo usaré, es muy bueno!!

De verdad, aunque no lo creais, me habéis ayudado mucho.

Un saludo!

[mayid]

@kseso: la solución que propuse tiene sus problemas. Firefox y Opera por no ir más lejos van a posicionar el menu a alturas distintas. No es así? Porque tienen una interpretación diferente de los pixeles, o algo por el estilo.

Me parece que el html del menú debería tener definido mas bien esto:
#menu { position: absolute; bottom: 2px;}

Y si, estoy completamente de acuerdo en que cada quien debería ser capaz de comprender lo que se le ofrece, y no solo hacer copy+paste.

[ataide]

Por favor, necesito eliminar este mensaje o que quiten la dirección web que sale a inicio, por favor.