Divs no se superponen

[kadas99]

Buenas noches, tengo 1 problemita que la verdad ya no se como arreglarlo, tengo 2 etiquetas div, una arriba de la otra, la de arriba despliega un menu y la de abajo solo muestra contenido, el problema, es que cuando se despliega el menu, me mueve la etiqueta del contenido!


aca les dejo el codigo del index y del css

Index.php

Código:

<div id="cabecera">
<div id="digitalglobe">
Digital Globe<br />
Santa Fe
</div>
<div id="fecha">
<?php echo date("m.d.y"); ?></div>
</div>
<div id="contenedor">
<ul>
<li>Ofertas</li>
<li>Nuestros Productos
	<ul>
   		<li>Micros</li>            
		<li>Mothers</li>
		<li>Memorias</li>
        <li>Pendrives</li>
        <li>Discos</li>
        <li>Cd/Dvd/Disk</li>
        <li>Notebooks</li>
        <li>Gabinetes</li>
        <li>Fuentes</li>
        <li>Teclados</li>
        <li>Parlantes</li>
        <li>Monitores</li>
        <li>Placas de Video</li>
        <li>Web Cams</li>
        <li>Impresoras</li>
        <li>Conectividad</li>
        <li>Placas de Sonido</li>
        <li>Consolas</li>
        <li>Joysticks</li>
        <li>Auriculares</li>
        <li>Mouses</li>
        <li>Proyectores</li>
        <li>Camaras Digitales</li>
        <li>Lector/Memorias</li>
        <li>Mp3/Mp4</li>
        <li>Gps</li>
    </ul>
</li>
<ul>
	<li>Sobre nosotros</li>
</ul>
<li>Contacto</li>
<li>Newsletter
	<ul>
    	<li>Alta</li>
        <li>Baja</li>
    </ul>
</li>
<li>Formas de Pago</li>
</ul>

<div id="contenedor">
Este es el div que no se deberia superponer, pero se mueve -.-
</div>

css.css

Código:

@charset "utf-8";

body{
width:80%;
margin: 0 auto;

}

#contenedor{
margin: 0 auto;
margin-left:16%;
margin-right:auto;

}

#cabecera{
background-image:*********;
background-repeat:no-repeat;
background-position:center;
border-style:solid;
border-width:1px;
border-color:#000000;
margin: 0 auto;
width:80%;
height:100px;
}

#digitalglobe{
text-align:left;
color:#666666;
font-size:18px;
margin-top:25px;
margin-left:80px;
}

#fecha{
text-align:right;
color:#666666;
font-size:18px;
margin-top:-40px;
}


/*Aca le doy estilo a todo lo que este contenido dentro de la primer etiqueta UL*/
ul {
font-family: Arial, Verdana;
font-size: 17px;
margin:0;
padding:0;
list-style: none;
}

/*Aca les doy el estilo todas las etiquetas LI dentro de UL*/
ul li {
font-size: 17px;
margin:0;
padding:0;
display: block;
position: relative;
float:left;

}

/*Aca mantengo ocultos los menues desplegables*/
li ul {
display: none;
font-size: 17px;
 
}

/*Aca le doy estilo a los href en las listas li*/
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;

}

/*Aca le doy estilo a los href cuando pasa el mouse por encima del link*/
ul li a:hover { 
background:#FF0066; 

}

/*Aca le doy estilo aL despliegue de los botones*/
li:hover ul {
  display: block;
  
}


/*Aca le doy estilo a los botones*/
li:hover li {
  float: none;
  font-size: 15px;

  
}

li:hover a {
background: #617F8A;

}

/*Aca le doy estilo a los botones cuando paso el mouse por encima*/
li:hover li a:hover {
background:#00FF00;
}

#index{
width:80%;
margin: 12 auto;
border-style:solid;
border-width:1px;
border-color:#000000;

}

ya probe de todo pero seguro es una pavada lo que me falta y que no hice.
probe de ver si el problema era porque los dos divs se llamaban igual, pero tampoco es eso, al contenido lo separe por un <br /> y lo deje sin <div> y tampoco.

Desde ya muchas gracias.

[kseso?]

Hola Kadas
a la segunda lista (ul li ul) de tu menú deberías posicionarla absolutamente cuando la muestres ("position:absolute) y ajustar su posición con valores para "left" y "top" si fuese necesario.
Con el valor "absolute" lo que haces es que su existencia (cuando lo muestras) no influya en el resto de elementos.

Un par de apuntes no solicitados por ti:
En el html tienes un error. Todo lo que esté en una lista (ul) debe estar contenido en su respectivo li. O dicho de otra forma: el único elemento hijo directo de ul debe ser un li, y dentro de éste lo que quieras. Y tú tienes:

Código html:

<ul>
  <li>Ofertas</li>
  <li>Nuestros Productos
    <ul>
       <li>Micros</li>            
       <li>Mothers</li>
        ...
       <li>Gps</li>
    </ul>
  </li>
        <ul><!-- este ul está fuera de un li -->
       <li>Sobre nosotros</li>
       </ul>
...etc
 

Segundo: en un vistazo rápido a tu css (y con los códigos que muestras) ya te adelanto que tu menú no funcionará en ie6. La razón: la pseudoclase ":hover" sólo la sabe aplicar a los enlaces y tú la aplicas a los li. Por ejemplo: "li:hover ul {...}
Tercero: lo más lógico y lo que cabría esperar en un menú es que el contenido de los li fuesen enlaces:

Código html:

<li><a href="#" title="Nuestras ofertas">Ofertas </a></li>
 

En las faq's de css tienes una amplia colección de menús por si quieres echarles un vistazo.

Un saludo

[kadas99]

Muchas gracias por todos los consejos, ahora mismo lo voy a probar, te comento rapido nomas que las etiquetas a href no las inclui ahora en el mensaje porque no me dejaba postear por temas de "spam" y pense que si encontraba las etiquetas a href me daria ese error, por lo demas muchas gracias, lo pruebo y comento!

[kadas99]

Nuevamente te agradezco la ayuda, ahi vi el error de la etiqueta <ul> que esta fuera de una etiqueta <li>.

sobre el position:'absolute' no me queda mas nada que volver a agradecerte, ahora se ve perfecto!

[jomaruro]

Hola:

Además tienes un error, defines el id contenedor y lo usas dos veces (una de ellas sin cerrar </div>) cuando si lo defines como id (#contenedor) es obligatorio usarlo exclusivamente una vez sola, si lo vas a usar más de una vez deberás hacerlo como <div clas="contenedor"> y en el css definirlo como clase (.contenedor).

Saludos.

[kadas99]

si eso me olvide de preguntar en el 1er post! si se podia o no utilizarlo dos veces, pero veo que como id no, pero si como class.

Muchas gracias!