Foros del Web » Creando para Internet » CSS »

problema menu y div

Estas en el tema de problema menu y div en el foro de CSS en Foros del Web. buenas, tengo un problema con el ,menu, quiero que al abrir el menu este se muestre por sobre el div contenedor y no lo haga ...
  #1 (permalink)  
Antiguo 09/02/2009, 08:46
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 10 años, 1 mes
Puntos: 4
problema menu y div

buenas, tengo un problema con el ,menu, quiero que al abrir el menu este se muestre por sobre el div contenedor y no lo haga bajo este, espero me entiendan la pregunta ak dejo el codigo y una imagen, de antemano gracias

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Pagina Principal</title>
<
link rel="stylesheet" type="text/css" href="estilo.css" />
</
head>

<
body>

<
div id="todo">

<
div id="superior">superior
<ul>
  <
li class="nivel1"><a href="#" class="nivel1">Opci&#243;n 1</a>
    
<ul class="nivel2">
        <
li><a href="#">Opci&#243;n 1.1</a></li>
        
<li><a href="#">Opci&#243;n 1.2</a></li>
    
</ul>
  </
li>
  <
li class="nivel1"><a href="#" class="nivel1">Opci&#243;n 2</a>
    
<ul class="nivel2">
        <
li><a href="#">Opci&#243;n 2.1</a></li>
        
<li><a href="#">Opci&#243;n 2.2</a></li>
        
<li class="nivel2"><class="nivel2" href="#">Opci&#243;n 2.3 »</a>
            
<ul class="nivel3">
                <
li><class="primera" href="#">Opci&#243;n 2.3.1</a></li>
                
<li><a href="#">Opci&#243;n 2.3.2</a></li>
                
<li><a href="#">Opci&#243;n 2.3.3</a></li>
            
</ul>
            <
li><a href="#">Opci&#243;n 2.4</a></li>
        
<li><a href="#">Opci&#243;n 2.5</a></li>
    
</ul>
</
li>
  <
li class="nivel1"><a href="#" class="nivel1">Opci&#243;n 3</a>
    
<ul class="nivel2">
        <
li><a href="#">Opci&#243;n 3.1</a></li>
        
<li><a href="#">Opci&#243;n 3.2</a></li>
        
<li><a href="#">Opci&#243;n 3.3</a></li>
    
</ul>
</
li>
  <
li class="nivel1"><a href="#" class="nivel1">Opci&#243;n 4</a>
    
<ul class="nivel2">
        <
li><a href="#">Opci&#243;n 4.1</a></li>
        
<li><a href="#">Opci&#243;n 4.2</a></li>
        
<li><a href="#">Opci&#243;n 4.3</a></li>
        
<li><a href="#">Opci&#243;n 4.4</a></li>
    
</ul>
</
li>
  <
li class="nivel1"><a href="#" class="nivel1">Opci&#243;n 5</a>
    
<ul class="nivel2">
        <
li><a href="#">Opci&#243;n 5.1</a></li>
        
<li><a href="#">Opci&#243;n 5.2</a></li>
        
<li><a href="#">Opci&#243;n 5.3</a></li>
    
</ul>
</
li>
</
ul>
    
</
div>
<
div id="lateral">lateral</div>


<
div id="contenedor">contenedor</div>

</
div>

</
body>
</
html
Código PHP:
*{
margin0px;
padding0pxoutline0;
}
htmlbody {
width100&#37;;
}
body {
background#366;
font-familyVerdanaArialHelveticasans-serif;
}
#superior {
text-aligncenter;
font-size0.7em;
width820px;
margin20px auto;
background-color:#999999;
}
#superior ul {
list-style-typenone;
}
#superior ul li {
width162px;
}
#superior ul li.nivel1 { 
floatleft;
margin-right1px;
}
#superior ul li a {
displayblock;
text-decorationnone;
color#fff;
background-color:#999999;;
bordersolid 1px #fff;
padding8px;
positionrelative;
}
#superior ul li a.nivel2, #superior ul li a.nivel2ie {
color#000;
}
#superior ul li a.nivel1, #superior ul li a.nivel2 {
displayblock!important;displaynone;
positionrelative;
}
#superior ul li:hover {
positionrelative;
}
#superior ul li a:hover, #superior ul li:hover a.nivel1 {
background-color:#CCCCCC;;
color#000;
positionrelative;
}
#superior ul li ul {
displaynone;
}
#superior ul li:hover  ul.nivel2, #superior ul li a:hover  ul.nivel2{
displayblock;
positionabsolute;left0px;
}
#superior ul li ul li a:hover ul.nivel3, #superior ul li ul li:hover ul.nivel3 {
displayblock;
positionabsolute;
left161px!important;left160px;
top:0px!important;top: -21px;
}
#superior ul li ul li a {
width160px;
padding8px 0px;
border-top-colortransparent;
}
#superior ul li ul li a:hover {
border-top-color#000;
positionrelative;
}
#superior ul li ul li ul li a.primera {
border-top-color#fff;
}
table.falsa {
border-collapse:collapse;
border:0px;
floatleft;
positionrelative;
}


#lateral
{
background-color:#666666;
width:150px;
margin-top:100px;
margin-left:30px;
height:300px;
position:absolute;
}

#contenedor
{
background-color:#666666;
margin-top:30px;
margin-left:220px;
height:450px;
width:700px;
position:absolute;



Última edición por oscar2h; 09/02/2009 a las 09:16 Razón: agrego imagen
  #2 (permalink)  
Antiguo 09/02/2009, 09:30
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años
Puntos: 56
Respuesta: problema menu y div

Usa z-index
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 09/02/2009, 09:46
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: problema menu y div

ok, gracias por al respuesta, como soy nuevo en css, no se me habia ocurrido ni menos lo habia utilizado antes, voy a ver como me va gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:29.