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ón 1</a>
<ul class="nivel2">
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<ul class="nivel2">
<li><a href="#">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li class="nivel2"><a class="nivel2" href="#">Opción 2.3 »</a>
<ul class="nivel3">
<li><a class="primera" href="#">Opción 2.3.1</a></li>
<li><a href="#">Opción 2.3.2</a></li>
<li><a href="#">Opción 2.3.3</a></li>
</ul>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<ul class="nivel2">
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<ul class="nivel2">
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<ul class="nivel2">
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opció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%;
}
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;
}
