[SOLUCIONADO] Menu desplegable, problema.

[leoass]

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.

/* 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

[Triby]

intenta aplicando margin:0; a .mi-menu ul li

[leoass]

Iniciado por Triby

intenta aplicando margin:0; a .mi-menu ul li

Gracias por el intento, pero no funciono...
PD: estoy usando google chrome (por si las dudas)

[pzin]

Te falta resetear el relleno de .mi-menu ul.

Código CSS:

.mi-menu ul {
  padding: 0;
}
 

[leoass]

Iniciado por Bonez

Te falta resetear el relleno de .mi-menu ul.

Código CSS:

.mi-menu ul {
  padding: 0;
}
 

SI!! andubo!! muchas gracias!