02/09/2013, 12:11
|
| | Fecha de Ingreso: enero-2012 Ubicación: Madrid
Mensajes: 13
Antigüedad: 13 años 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>
|