prueba metiendole transform:scale(1.1);position:relative;right:50px; de otra forma no lo consigo
muchas gracia suso30 por tu respuesta.
He conseguido que el menu de la derecha se despliegue a la izquierda modificando:
" en el div#menu-derecho { he cambiado a
float: right;
margin-right: 0px;
margin-left: 30px;
y en div#menu-derecho il li{ he cambiado a
float:right;
Os dejos el css completo.
div#menu-derecho {
float: right;
width: 200px; /* va contener la primera columna*/
margin-top: 30px; /* esto lo va a separar todo el bloque de el borde superior 50px*/
margin-right: 0px; /*background-color: red; se puso al inicio despues border-radius se quito */
margin-left: 30px;
}
div#menu-derecho ul{
list-style:none; /*quita los puntos de la lista */
}
div#menu-derecho ul li{ float:right; /*para dar caracteristicas a las listas*/
margin-top: 15px;/*cada texto de cada reglon va a tener arriba un espacio de 15px*/
font-family: tahoma; /*tipo de letra para que sea un poco más vistoso*/
font-size: 14px; /*tamaño de la letra */
background-color: #B6D1DC;
width: 200px;
padding-top: 5px; /* distancia hasta el borde de arriba*/
padding-bottom: 5px;
border-radius: 20px 20px 20px 20px; /* para el redondeo de esquinas*/
padding-left: 20px; /* para separar la letra del margen izquierdo */
box-shadow: 0px 2px 10px #939393;/* para darle el sombreado */
-webkit-transition: padding-right 0.6s;
font-weight: bold;
}
div#menu-derecho ul li:hover{
padding-left:50px;
color:#FFF;
}
Un saludo y gracias.