Ver Mensaje Individual
  #3 (permalink)  
Antiguo 02/09/2013, 12:11
mikel00
 
Fecha de Ingreso: enero-2012
Ubicación: Madrid
Mensajes: 13
Antigüedad: 12 años, 3 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>