[SOLUCIONADO] ¿Cómo puedo pegar completamente a la izquierda una lista desplegable?

[matheus_rostenkowski]

Muy Buenas! Estoy creando un menú para una web donde el objetivo es que al pasar el ratón sobre los apartados (:hover) justo debajo de los mismos se lea la palabra en un tamaño mayor. Hasta aquí todo bien, el problema que tengo es que cada "sublista" (cada palabra) me sale justo debajo de su botón padre, y mi objetivo es que estas se me peguen completamente a la izquierda de la pantalla.

Este es mi código html:

<nav id="menu_bar">
<ul id="main_menu">
<li class="main_button"><a href="">Novedades</a>
<ul>
<li class="bottom_nov">Novedades</li>
</ul>
</li>
<li class="main_button"><a href="">Quienes somos</a>
<ul>
<li class="bottom_qui">Quienes somos</li>
</ul>
</li>
<li class="main_button"><a href="">Colabora</a>
<ul>
<li class="bottom_col">Colabora</li>
</ul>
</li>
<li class="main_button" id="desp_menu"><a href="">Numeros</a>
<ul>
<li class="bottom_num">Numeros anteriores</li>
</ul>
</li>
</ul>
</nav>

Y este el CSS

nav{
margin:0 auto;
font-family:bold 'Roboto Condensed', sans-serif;
font-size:1em;
}

nav > ul > li{
list-style: none;
display: inline-block;
position:relative;
margin-top:1.563em;
margin-right:1.563em;
margin-bottom:1.563em;
}

nav > ul > li > a{
color:inherit;
font-weight:bold;
text-decoration:none;

}

nav > ul > li > a:hover{
background-color:#FF0;
}


nav li ul{
position:absolute;
list-style:none;
text-align:left;

max-height:0px;
overflow:hidden;

-webkit-transition:max-height 0.2s linear;
-moz-transition:max-height 0.2s linear;
transition:max-height 0.2s linear;
}

nav li:hover ul{
overflow:visible;

}

nav li ul li{
font-size:120px;
font-weight:900;
margin-top:25px;
}

nav li ul .bottom_qui{
margin-left:-1em;
}

nav li ul .bottom_col{
margin-left:-2em;
}

nav li ul .bottom_num{
margin-left:-3em;
}

Como podeis comprobar, he probado a restar de forma gradual (-1em, -2em, etc..) y a priori funciona, el problema es que la web pretende ser fluida y al reducir la ventana se me salen de cuadro.

Espero no haberme extendido mucho ;) Gracias de antemano.

[C2am]

Hola
Bueno, la teoría indica que al tener posicionado en forma absoluta tu sublista (ul li ul), bastaría con fijarle a tu nav o elemento ancestro a la lista primaria la posicion:relative y quitarle esa propiedad a los items ul li.
La idea es que la sublista tome como referencia el elemento ancestro que fluirá, y de este modo se acomodará en la posición que deseas.

Ejemplo:
http://jsfiddle.net/c2am/5KZk2/9/embedded/result/

Código HTML:

<nav id="menu_bar">
<ul id="main_menu">
<li class="main_button"><a href="">Novedades</a>
<ul>
<li class="bottom_nov">Novedades</li>
</ul>
</li>
<li class="main_button"><a href="">Quienes somos</a>
<ul>
<li class="bottom_qui">Quienes somos</li>
</ul>
</li>
<li class="main_button"><a href="">Colabora</a>
<ul>
<li class="bottom_col">Colabora</li>
</ul>
</li>
<li class="main_button" id="desp_menu"><a href="">Numeros</a>
<ul>
<li class="bottom_num">Numeros anteriores</li>
</ul> 
</li>
</ul>
</nav>
 

Código CSS:

nav{
margin:0 auto;
font-family:bold 'Roboto Condensed', sans-serif;
font-size:1em;
    background:#f5d8e4;
    position:relative;
}
 
nav > ul > li{ 
list-style: none;
display: inline-block;
 
margin-top:1.563em;
margin-left:1.563em;
margin-bottom:1.563em;
}
 
nav > ul > li > a{
color:inherit;
font-weight:bold;
text-decoration:none;
 
}
 
nav > ul > li > a:hover{
background-color:#FF0;
}
 
 
nav li ul{
position:absolute;
list-style:none;
text-align:left;
left:0px;
max-height:0px;
overflow:hidden;
 
-webkit-transition:max-height 0.2s linear;
-moz-transition:max-height 0.2s linear;
transition:max-height 0.2s linear;
}
 
nav li:hover ul{
overflow:visible; 
 
}
 
nav li ul li{
font-size:120px;
font-weight:900;
margin-top:25px;
    margin-left:0;
}
 

Saludos

[matheus_rostenkowski]

C2 am, Grande!!
Un millón de gracias amigo!!

Ahora veo el problema bien claro.