problema menu y div

oscar2h · #1 (**permalink**) 09/02/2009, 08:46

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"><a class="nivel2" href="#">Opci&#243;n 2.3 »</a> 
            <ul class="nivel3"> 
                <li><a 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:

  *{ 
margin: 0px; 
padding: 0px; outline: 0; 
} 
html, body { 
width: 100&#37;; 
} 
body { 
background: #366; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
} 
#superior { 
text-align: center; 
font-size: 0.7em; 
width: 820px; 
margin: 20px auto; 
background-color:#999999; 
} 
#superior ul { 
list-style-type: none; 
} 
#superior ul li { 
width: 162px; 
} 
#superior ul li.nivel1 {  
float: left; 
margin-right: 1px; 
} 
#superior ul li a { 
display: block; 
text-decoration: none; 
color: #fff; 
background-color:#999999;; 
border: solid 1px #fff; 
padding: 8px; 
position: relative; 
} 
#superior ul li a.nivel2, #superior ul li a.nivel2ie { 
color: #000; 
} 
#superior ul li a.nivel1, #superior ul li a.nivel2 { 
display: block!important;display: none; 
position: relative; 
} 
#superior ul li:hover { 
position: relative; 
} 
#superior ul li a:hover, #superior ul li:hover a.nivel1 { 
background-color:#CCCCCC;; 
color: #000; 
position: relative; 
} 
#superior ul li ul { 
display: none; 
} 
#superior ul li:hover  ul.nivel2, #superior ul li a:hover  ul.nivel2{ 
display: block; 
position: absolute;left: 0px; 
} 
#superior ul li ul li a:hover ul.nivel3, #superior ul li ul li:hover ul.nivel3 { 
display: block; 
position: absolute; 
left: 161px!important;left: 160px; 
top:0px!important;top: -21px; 
} 
#superior ul li ul li a { 
width: 160px; 
padding: 8px 0px; 
border-top-color: transparent; 
} 
#superior ul li ul li a:hover { 
border-top-color: #000; 
position: relative; 
} 
#superior ul li ul li ul li a.primera { 
border-top-color: #fff; 
} 
table.falsa { 
border-collapse:collapse; 
border:0px; 
float: left; 
position: relative; 
} 
 
 
#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; 
 
}

America|UNK · #2 (**permalink**) 09/02/2009, 09:30

Usa z-index

oscar2h · #3 (**permalink**) 09/02/2009, 09:46

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