Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/02/2013, 05:53
leoass
 
Fecha de Ingreso: octubre-2010
Ubicación: La Plata
Mensajes: 63
Antigüedad: 13 años, 6 meses
Puntos: 0
Mensaje Menu desplegable, problema.

Hola, hoy vengo con otra duda. Veran, he puesto un menu desplegable en una pagina. Pero el problema es el de esta imagen

Como veran, el submenu esta corrido hacia la derecha.

Aca les apunto el css para que lo puedan ver.

Cita:
/* el menú en si mismo */
.mi-menu {
border-radius: 5px;
list-style-type: none;
margin: 0 auto; /* si queremos centrarlo */
padding: 0;
/* la altura y su ancho dependerán de los textos */
height: 40px;
width: 510px;
/* el color de fondo */
background: #555;
background: -moz-linear-gradient(#555,#222);
background: -webkit-linear-gradient(#555,#222);
background: -o-linear-gradient(#555,#222);
background: -ms-linear-gradient(#555,#222);
background: linear-gradient(#555,#222);
}

/* 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;
color: #EEE;
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: #222;
background: -moz-linear-gradient(#222,#555);
background: -webkit-linear-gradient(#22,#555);
background: -o-linear-gradient(#222,#555);
background: -ms-linear-gradient(#222,#555);
background: linear-gradient(#222,#555);
/* 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 uno de 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; }
Si alguien me puede decir como solucionarlo, le agradeceria