Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/12/2013, 10:11
Avatar de matheus_rostenkowski
matheus_rostenkowski
 
Fecha de Ingreso: junio-2013
Mensajes: 16
Antigüedad: 10 años, 11 meses
Puntos: 0
¿Cómo puedo pegar completamente a la izquierda una lista desplegable?

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.