Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menu desplegable(se despliega debajo de otro div)

 Estas en el tema de Menu desplegable(se despliega debajo de otro div) en el foro de CSS en Foros del Web. Bueno pues estoy haciendo una pagina web y me a salido un pequeño problema que no se resolver tengo un menu desplegable arriba (el verde ...
  #1 (permalink)  
Antiguo 02/09/2013, 12:09
 
Fecha de Ingreso: enero-2012
Ubicación: Madrid
Mensajes: 13
Antigüedad: 12 años, 10 meses
Puntos: 1
Menu desplegable(se despliega debajo de otro div)
Bueno pues estoy haciendo una pagina web y me a salido un pequeño problema que no se resolver

tengo un menu desplegable arriba (el verde y negro) y al desplegarse me sale por debajo de otras cajas... pongo aqui una extraccion del codigo(guarreado, sucio y tal.. xD pero se ve el problema) pero a lo que voy, alguien sabe soolucionarlo??

Código: 
<!DOCTYPE html><!--  -->
<html lang="es">
	<head>
		<meta charset="utf-8">
		<meta charset="iso-8859-1" />
		<meta name="description" content="" /><!-- name = tipo -->
		<meta name="keywords" content="" /><!-- content = valor -->
		<title>TITULO BLALBALB</title>
		<link rel="stylesheet" href="001.css" /><!-- le dice al navegador que el archivo "href" es un archivo CSS con estilos
requeridos para presentar la página en pantalla-->
	</head>
	<body>
		<header id ="Titulo01">
			<h1>TITULO BLALBALL</h1>

		</header>
		<nav id="menu01">
			
			<ul class="mi-menu">
				<li><a href="http://www.google.es">Mejores ofertas</a></li>
				<li><a href="www.gay.es">Nosotros</a></li>
				<li><a href="www.gay.es">Contacto</a></li>
				<li>
					<a href="#">AAAAAAA</a>
					<ul class= "menu_sem">
						<li><a href="http://www.google.es"> AAAAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAA </a></li>
					</ul>
				</li>
				<li>
					<a href="#"> AAAAAAAAA</a>
					<ul class="menu_5">
						<li><a href="http://www.google.es">AAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAA </a></li>
					</ul>
				</li>
				<li>
					<a href="#">AAAAAAAAAAAAAAAAAAAAA</a>
					<ul class="menu_6">
						<li><a href="http://www.google.es"> AAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAA </a></li>
					</ul>
				</li>
				<li>
					<a href="#">AAAAAAAAAAAA</a>
					<ul class="menu_7">
						<li><a href="http://www.google.es"> AAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAAAAA </a></li>
						<li><a href="http://www.google.es"> AAAAAAAAA </a></li>
					</ul>
				</li>
			</ul>
		</nav>
		<section id="agrupar_mikel">
			<aside id="menu_derecha">
				<ul id="nav" class="clearfix">

						<!--<li><a href="/history">&nbsp;<&nbsp;</a></li>-->
					<li ><a href="http://www.google.es">AAAAAAAAAAAAAAA</a></li>
					<li  class="list">
						<a href="http://www.google.es"><span></span>SAAAAAAAAAAAAAA</a>
						<div class="col-4 clearfix">
							<span>
								<ul class="clearfix">
									<li id="mikel">
										
									</li>  
								</ul>
							</span>
						</div>
					</li>
					<li  class="list  ">
						<a href="http://www.google.es"><span></span>AAAAAAAAAAAAAAAAAA</a>
						<div class="col-4 clearfix">
							<span>
								<ul class="clearfix">
									<li id="mikel">
										  
									</li>  
									<li id="mikel">
										
									</li>  
									<li id="mikel">
										
										</ul>    
									</li>  
									<li id="mikel">
										
										</ul>    
									</li>  
								</ul>
							</span>
						</div>
					</li>
					<li  class="list  ">
						<a href="http://www.google.es"><span></span>AAAAAAAAAAA</a>    
						<div class="col-1 clearfix">
							<span>
								<ul class="clearfix">            
									<li id="mikel">
										
									</li>  
								</ul>
							</span>
						</div>
					</li>

					<li ><a href="http://www.google.es">Mi cuenta</a></li><!--
					<li ><a href="/nosotros/">Nosotros</a></li>
					<li ><a href="/contacto/">Contacto</a></li>
					<li ><a href="/pedido/">Pedido</a></li> -->
				</ul>
			</aside>
			<div id="contenido">
			  <!-- body -->
				<table width="100%" cellspacing="0" cellpadding="0" border="0">
					<tbody>

						<tr>
							<td>
								<div id="bloqueProductos" class="bloqueProductos">
									
								</div>
							</td>
						</tr>
					</tbody>
				</table>
							  <!-- body_eof //-->
			</div>
		
		</section>
	</body>
  #2 (permalink)  
Antiguo 02/09/2013, 12:10
 
Fecha de Ingreso: enero-2012
Ubicación: Madrid
Mensajes: 13
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable(se despliega debajo de otro div)
Código: 
<style type="text/css">


/*MENU ARRIBA */

#menu01 {
padding:25px;
margin: 25px;

}
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;/*
    margin: 0 auto 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 

    /* el color de fondo */
    background: red;
    background: -moz-linear-gradient(#0B3B0B,black);
    background: -webkit-linear-gradient(#0B3B0B,black);
    background: -o-linear-gradient(#0B3B0B,black);
    background: -ms-linear-gradient(#0B3B0B,black);
    background: linear-gradient(#0B3B0B,black);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
			text-shadow: white 3px 3px 5px;
    color: white;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: green;
    background: -moz-linear-gradient(blue,green);
    background: -webkit-linear-gradient(blue,green);
    background: -o-linear-gradient(blue,green);
    background: -ms-linear-gradient(blue,green);
    background: linear-gradient(blue,green);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }

  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

  .mi-menu ul:last-child{
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: green;
    background: -moz-linear-gradient(#0B3B0B,black);
    background: -webkit-linear-gradient(#0B3B0B,black);
    background: -o-linear-gradient(#0B3B0B,black);
    background: -ms-linear-gradient(#0B3B0B,black);
    background: linear-gradient(#0B3B0B,black);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul:last-child { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul:last-child li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul:last-child li {
    height: 40px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul:last-child li a {
    border: none;
    border-bottom: none;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  ul.menu_sem
  {
	padding: 0 0 0 0;
	width: 120px;
}
ul.menu_5
{
	padding:0 0 0 0;
	width: 130px;
	
}
ul.menu_6
{
	padding: 0 0 0 0;
	width: 120px;
	
}
ul.menu_7
{
	padding: 0 0 0 0;
	width: 125px;
	
}

/* FIN MENU ARRIBA */
  #3 (permalink)  
Antiguo 02/09/2013, 12:11
 
Fecha de Ingreso: enero-2012
Ubicación: Madrid
Mensajes: 13
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable(se despliega debajo de otro div)
la continuacion del css...

Código: 
#agrupar_mikel
{
background: grey;
width: 930px;
height: auto;
padding: 10px;
margin: 0 0 0 10%;
}
aside#menu_derecha
{
width: 170px;
background: red;
text-align:center;
}





/*MENU left*/





.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

#mikel/* li desplegable dentro de clearfix */
{
float: left;
background: none;
}
.clearfix li
{

    background: -moz-linear-gradient(#DAB7FE,black);
    background: -webkit-linear-gradient(#DAB7FE,black);
    background: -o-linear-gradient(#DAB7FE,black);
    background: -ms-linear-gradient(#DAB7FE,black);
    background: linear-gradient(#DAB7FE,black);


}
/* MENU */
#nav { width: 170px;
 margin: 0;
  padding: 0 0 0 0;
  font: bold 15px Arial;
  color: #1d191a;
  background: #f2ede7;
      border-bottom: 1px solid #000;
    border-top: 1px solid #666;
	    border-radius: 5px;
		
}
#nav  li {

	z-index: 30;
  position: relative;
  float: top; /* CAMBIADO "LEFT" */
  padding: 0 ; margin: 10px 0 10px 0;
  list-style: none;
      border-bottom: 1px solid #000;
    border-top: 1px solid #666;
	
}/*
  #nav  li:first-child { border-top: none;}/* CAMBIADO left*top*/

#nav  li a { 
	
  display: block; 
  color: white;  /* COLOR LETRAS */
  text-decoration: none; line-height: 23px;
  
  
}
#nav  li.list a { position: relative; }
#nav  li a span { display: none; position: absolute; width: 25px; height: 14px; bottom: -15px; left: 35%; z-index: 31; background: none;  }
#nav  li:hover a span { display: block }

  #nav  li:first-child {border-left: none;}/*
  #nav  li:last-child { border-bottom: none}/* CAMBIADO */
  #nav  li.on { padding: 0;}
  #nav  li.on a {
    padding: 0 14px;
    background: #0093dc; 
    color: #fff; 
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
#nav  li:hover div { display: block;}
#nav  li div { 
  display: none;
  position: absolute; left: 0; 
  width: auto; padding-top: 0;
  margin: -50px 0 0 170px;/* CAMBIADO "la lista pa la derexa"*/
  
  
}

#nav  li:last-child div {
  left: auto;
  right: 0
}
  #nav  li div:before {
     content:"";
     position:absolute;
     z-index:-1;
     top:13px;
     left:0;
     right:-4px;
     bottom:-4px;
     background:#f2f2f2;
  }

  #nav  li div.col-1 { width: 210px;}
  #nav  li div.col-2 { width: 390px;}
  #nav  li div.col-3 { width: 570px;}
  #nav  li div.col-4 { width: 755px;}
  #nav  li div.col-5 { width: 930px;}
  
#nav  li div span { 
border-right: 4px solid #f2f2f2;
border-bottom: 4px solid #f2f2f2;
display: block;
}
/* EL MENU DE LA DEREXA*/
#nav  ul 
{
	-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: black 5px 5px;

	margin: 0; 
	padding: 17px 20px; 
	background: -moz-linear-gradient(#DAB7FE,black);
    background: -webkit-linear-gradient(#DAB7FE,black);
    background: -o-linear-gradient(#DAB7FE,black);
    background: -ms-linear-gradient(#DAB7FE,black);
    background: linear-gradient(#DAB7FE,black);
	-webkit-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; 

	
}
#nav  li div ul li { width: 154px; border: none; border-left: 1px solid #ebe7e2; margin: 0; padding: 0 5px 0 20px;  }
#nav  li div ul li:first-child { padding-left: 0  }
#nav  li div ul ul { border: none; margin: 0; padding: 0; }
#nav  li div ul ul li { border: none;  margin: 0; padding: 0;}

#nav  li div h3, #nav  li div h3 a, #nav  li.on div h3 a { font: normal 11px arial; color: blue; text-transform: uppercase; text-decoration: none;	}
  #nav  li div h3 a:hover { color: #fc7900; text-decoration: underline; background: none}
#nav  li div a, 
#nav  li.on div a {
  font: normal 11px/16px arial;
  padding: 0;
  color: white;
  background: none;
  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; 
}
#nav  li div a:hover { color: #fff; background: #ff7e00; margin-left: -5px; padding-left: 5px;}
ul#nav.clearfix
{

    background: -moz-linear-gradient(#DAB7FE,black);
    background: -webkit-linear-gradient(#DAB7FE,black);
    background: -o-linear-gradient(#DAB7FE,black);
    background: -ms-linear-gradient(#DAB7FE,black);
    background: linear-gradient(#DAB7FE,black);
	
}
/*FIN MENU left*/

/*PRODUCTOS   */


#contenido {
	position:relative;
	margin: -185px auto auto 200px;
	padding:30px;
	width: 665px;
	background:red;
}

.bloqueProductos {
	/*width: 550px;*/
	margin-left:10px;
	text-align:center;
	
}

.bloqueProductos .productListing-heading {
	display:none;
}

.productListing-even td, .productListing-odd td  {
	vertical-align:middle;
}


.elementoProducto {
	width: 300px;
	height: 155px;
	position:relative;
	float:left;
	text-align:left;
	margin:5px;
	background:#EFEFEF;
	padding:5px;
	
}

.styleProductModel {
}

.styleProductName {
	position:absolute;
	top:5px;
	left:115px;
	font-size:16px;
	font-weight:bold;
}

.styleProductName a {

}

.styleProductName a:hover{
	color:#111111;
	text-decoration:underline;
}

.styleProductManufacturer {
	display:block;
	font-size:12px;
}

.styleProductPrice {
	position:absolute;
	top:45px;
	left:115px;
	font-size:14px;
	font-weight:bold;
}

.styleProductQuantity {
	position:absolute;
	bottom:10px;
	left:10px;
	font-style:italic;
}

.styleProductDescription {
	display:none;
	position:absolute;
	top:45px;
	left:115px;
	font-size:10px;
	height:40px;
 }
 
 
.styleProductWeight {
}

.styleProductImage{
	float:left;
}

.cartQuantity {
	display:none;
	position:absolute;
	bottom:30px;
	left:10px;
	font-size:10px;
	font-weight:bold; 
}
 
 
.styleProductBuyNow {
 	position:absolute;
	bottom:30px;
	left:10px;
}

.paginacionProductos /*numero de paginas de productos, debajo de un listad0*/ {
	width:510px;
	margin-top:10px;
	clear:both;
	padding:2px;
}

.paginacionProductos .smallText{
	font-size:11px;
	color:#556F92;
}

SPAN.markProductOutOfStock {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #c76170;
	font-weight: bold;
}

SPAN.productSpecialPrice {
	font-family:Arial, Helvetica, sans-serif;
	color: #ff0000;
}

/* FIN DE PRODUCTOS */

/*---------------------------ESTILOS GENERALES------------------------------------

--------------------------------------------------------------------------------*/

h1 {
	font-size:24px;
	color:#498323;
	margin:0px;
}

h2 {
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#498323;
	margin:0px;
}

a { 
	color:#498323; 
	text-decoration: none; 
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

a:hover { 
  color: #5A8840;
  text-decoration: underline; 
}

.Estilo1 {
	color: #00CC33;
	font-weight: bold;
}



</style>
  #4 (permalink)  
Antiguo 02/09/2013, 12:12
 
Fecha de Ingreso: agosto-2013
Mensajes: 99
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: Menu desplegable(se despliega debajo de otro div)
Al div que se despliega y que sale por debajo de las otras cajas llamalo en los estilos y ponle

Código HTML:

#DivisorDesplegable{

  z-index:100;

                      }
  #5 (permalink)  
Antiguo 02/09/2013, 12:16
 
Fecha de Ingreso: enero-2012
Ubicación: Madrid
Mensajes: 13
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable(se despliega debajo de otro div)
mil millones de graciass!

Cita:
Iniciado por lilmaster Ver Mensaje
Al div que se despliega y que sale por debajo de las otras cajas llamalo en los estilos y ponle

Código HTML:

#DivisorDesplegable{

  z-index:100;

                      }
  #6 (permalink)  
Antiguo 02/09/2013, 12:26
 
Fecha de Ingreso: agosto-2013
Mensajes: 99
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: Menu desplegable(se despliega debajo de otro div)
Cita:
Iniciado por mikel00 Ver Mensaje
mil millones de graciass!
Para eso estamos

Etiquetas: contenido, debajo, html, página
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:46.