menu desplegable horizintal a la izquierda

jakijem · #1 (**permalink**) 30/06/2014, 07:32

¿Alguien sabe si es posible hacer un menu desplegable en horizontal, pero que abra hacia la izquierda?

Algo como:

Cita:

↓ Language

pzin · #2 (**permalink**) 30/06/2014, 10:35

Si. Lo construyes como un menú desplegable normal, pero la sublista en lugar de tener un top: 100% tiene un bottom: 100%.

jakijem · #3 (**permalink**) 30/06/2014, 11:49

no entiendo nada, te pongo mi codigo por msi puedes ayudarme:

HTML:

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<nav id="language">
        <ul class="navlan">
            <li ><a href="">ENGLISH</a>
                <ul>
                    <li><a href="">FRANCAISE</a></li>
                    <li><a href="">ESPAÑOL</a></li>
                    <li><a href="">ITALIANO</a></li>
                    <li><a href="">ARABIC</a></li>
                    <li><a href="">RUSSIAN</a></li>
                </ul>
            </li>
        </ul>
      </nav>
</body>
</html>

CSS:

Cita:

#language {
text-align: center;
width: 80px;
font: 1.2em;
line-height: 1em;
min-height: 42px;
position: absolute;
right: 15.867093%;
text-align: left;
top: 0px;
height: 23px;
left: 65%;
}

/* menu idiomas dropdown*/
/* =================== */

nav .navlan ul {
color:#000;
padding:0;
margin:0;
list-style: none;
position: relative;
display:inline;
}

nav .navlan ul li {
float:left;
display:inline;
list-style: none;

}

nav .navlan ul li a {
display:inline;
font-size:16px;
text-decoration:none;
font-family: 'Nilland';
}

.navlan li a:hover {font-weight:Bold; }

/* Estilos del dropdown */

/* Oculta Dropdowns por defecto */
nav .navlan ul ul {
display: none;
position: absolute; top: 28px;
}

/* Muestra Dropdowns on Hover */
nav .navlan ul li:hover > ul {
/*display:list-item;*/
display: inline;
padding:0;
margin:0;
}

/* primer descendiente Dropdown */
nav .navlan ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}

/* Segundo, tercero y siguientes descendientes */
nav .navlan ul ul ul li {
position: absolute relative;
top:-24px;
left:170px;
}

/* flechitas del elemento que tiene dropdown */
.navlan li > a:after { content: ' <'; }
.navlan li > a:only-child:after { content: ''; }

pzin · #4 (**permalink**) 30/06/2014, 12:38

¿Qué es lo que no entiendes? Es muy simple lo que dije como para no entenderlo.

jakijem · #5 (**permalink**) 30/06/2014, 13:13

Cita:

Iniciado por pzin

¿Qué es lo que no entiendes? Es muy simple lo que dije como para no entenderlo.

Pues no entiendo en que parte de la sublista hay que poner el bottom: 100%, dado que en ninguna parte tenia el top: 100% que mencionas

Y tampoco entiendo como puede eso afectar a dos cosas: que el dropdown aparezca en horizontal, en lugar de en vertical (como aparece ahora), y que además se despliegue hacia la izquierda.

Eso es lo que no entiendo.

pzin · #6 (**permalink**) 30/06/2014, 14:15

Ahm. No sé porqué había leido que se abriera en vertical hacia arriba.

Bueno, es casi lo mismo. Todo es cuestión del posicionamiento. Normalmente tienes una sublista ul con un posicionamiento absoluto, y ahí controlas hacia donde quieres abrirlo. Como casi siempre querrás abrirlo desde alguno de los bordes, lo indicas con top, right, bottom o left. En tu caso el borde de la derecha, entonces pones que se abra al 100% del borde de la izquierda con left: 100%.