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