Desplegable se cierra según posición del ratón

[CarlosMilles]

La cosa es que tengo una cabecera donde basicamente hay un logo, dos botones para moverse por la página y un deplegable para seleccionar el idioma.

Mi problema está en el desplegable, que al pasar el ratón por encima se depliega perfectamente, y mientras el ratón está digamos en el rectángulo de la cabecera, este funciona, pero cuando el ratón sobrepasa esa "frontera", el desplegable se me cierra. ¿A que se debe?



En la imagen el ratón estaba por encima de la parte azul (cabecera de mi pag), al pasar a la altura del rojo (todo esto con el desplegable abiert) se cierra.

Código HTML:

<div class="ContenedorCabecera">
            <a href="#" class="Logo">LogoUEPcar</a>
        <div class="ContenedorNavegacion">
            <div class="ContenedorBotones">
                <div class="icon-set icon-set-center">
                    <div class="icon BotonHome"></div>
                    <div class="icon BotonADV"></div>
                </div>
            </div>
        </div>
        <div class="ContenedorIdiomas">
            <ul class="DropdownIdiomas Fuente">
                <li class="active">Idioma actual</li>
                <li class="first"><div class="Banderas BanderaEsp"></div><a href="#">Español</a></li>
                <li><div class="Banderas BanderaMall"></div><a href="#">Mallorquí</a></li>
                <li class="last"><div class="Banderas BanderaEng"></div><a href="#">English</a></li>
            </ul>
        </div>
    </div>
 

Grasias!

[CarlosMilles]

Ayuda por favor!!

[pzin]

Lo más probable es que exista otro elemento que esté por encima. Pero si no aportas el código CSS, no se puede saber.

[CarlosMilles]

Código CSS:

html{
    overflow-y: scroll
}
body{
    background-color: #cb4040;/*12345a*/
    margin:0;
    padding: 0;
    border:0;
    vertical-align: baseline;
    width: 100%;
    height:100%;
}
.Fuente{
    font-family: 'Amatic SC', cursive;
    font-size: 20px;
    color:black;
    font-weight: bold;
}
.Centrar{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.ContenedorCabecera{
    background-color: #123456;
    position: relative; /*Static ya que es la primera y su posición es arriba*/
    height: 150px; /*???????????????????*/
}
a.Logo{
    height: 213px;
    width: 320px;
    position: absolute;/*PORQUE?????????*/
    top:13px;
    left: 1%;
    background:transparent url(../Imagenes/UEPcarLogo.png) no-repeat 0 0;
    background-size: contain;
    text-indent: -9999px;
    font-size: 0;
    text-decoration: none;
}
.ContenedorNavegacion{
    position: relative;
}
.ContenedorBotones{
    position: relative;
    height: 60px;
}
.icon-set.icon-set-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:100%;
}
.icon-set .icon {
    width: 100px;
    height: 60px;
    display: inline-block;
    cursor: pointer;
}
 
.BotonHome{
    background:transparent url(../Imagenes/Home.png) no-repeat 0 0;
}
 
.BotonHome:hover {
    background:transparent url(../Imagenes/HomeHover.png) no-repeat 0 0;
}
 
.BotonADV {
    background:transparent url(../Imagenes/ADV.png) no-repeat 0 0;
}
 
.BotonADV:hover {
    background:transparent url(../Imagenes/ADVHover.png) no-repeat 0 0;
}
.ContenedorCuerpo{
    /*background-color: #321654;*/
    position: relative;
    height: 400px;
}
.XXX .PP {
    width: 150px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
    height: 30px;
    display: inline-block;
    cursor: pointer;
}
.XXX .SS {
    width: 50px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
    height: 30px;
    display: inline-block;
    cursor: pointer;
    margin-left: 50px;
}
.SimuladorPartida{
    background:transparent url(../Imagenes/SimuladorPartida.png) no-repeat 0 0;
}
.SimuladorLlegada{
    background:transparent url(../Imagenes/SimuladorLlegada.png) no-repeat 0 0;    
}
 
 
/******* DESPLEGABLE IDIOMAS *******/
.ContenedorIdiomas{
    float: right;
}
ul.DropdownIdiomas{
    width: 150px; /*Ancho del desplegable*/
    border-radius: 5px; /*Curvatura del radio*/
    -moz-border-radius: 5px;/*Compatibilidad con moz y resto navegadores*/
    -webkit-border-radius: 5px;
    background: #4b7af1; /*Color del desplegable, parte superior y el costado con los puntos*/
    margin-top: 0em; /*Separación del desplegable respecto arriba*/
    margin-right: 1em;/*Separación respecto margen derecho*/
    list-style:none; /*Quitar los puntos del costado de las listas*/
}
ul.DropdownIdiomas li{
    display: none;
}
ul.DropdownIdiomas li.active{
    display: block;
    
}
ul.DropdownIdiomas li.active {
    padding-left: 24px;/*Margen interior izquierdo del texto, idioma actual*/
    color: #000000;/*Color de la letra del que está seleccionado*/
}
ul.DropdownIdiomas li a{
    display: block;
    text-decoration: none; /*Quita la linea de abajo que tienen los enlaces*/
    padding: 8px 8px 8px 10px;
    background: #7d9ef2;/*Color del fondo de las tres opciones*/
}
ul.DropdownIdiomas li.last a{
    border-radius: 5px; /*El ultimo del desplegable tiene radio 5px*/
}
ul.DropdownIdiomas li a:hover{
    background: #256369; /*Color de fondo cuando hago el hover*/
    color: #ffffff; /*Color de la letra cuando hago el hover*/
    padding-left: 11px;
}
ul{/*Quitar la columna donde están los puntos de la lista*/
    list-style-position: inside;
    padding-left:0;
    *margin-left:0;
}
 
    /******* BANDERAS *******/
    .Banderas {
        width: 32px;
        height: 24px;
        float: right;
        padding: 4px 25px 0px 4px;
        margin: 3px;
        margin-top: 8px;
    }
    .first .Banderas {
      margin-top: 10px;
    }
    .Banderas.BanderaEsp {
      background:transparent url(../Imagenes/BanderaEsp.png) no-repeat 0 0;
    }
    .Banderas.BanderaMall {
      background:transparent url(../Imagenes/BanderaMall.png) no-repeat 0 0;
    }
    .Banderas.BanderaEng {
      background:transparent url(../Imagenes/BanderaEng.png) no-repeat 0 0;
    }
    /******* BANDERAS *******/
 
/******* DESPLEGABLE IDIOMAS *******/
 
/******* FOOTER *******/
footer{
    width: 100%;
    height: 70px;
    background: #993c39;
    position: absolute;
    bottom: 0;
}
.Mapa{
    margin-top: 190px;
}
 

Yo creo que el problema es la position del contenedor cuerpo. Pero probando eso, se me descuadra todo, así que no se...

[CarlosMilles]

Nadie se le ocurre nada?

[pzin]

Con el código que das no se ve ningún problema. Pero supongo que es código incompleto. Bueno, de una parte incompleto, y de otra, aportas código innecesario.

La cuestión es reproducir el problema, que no es el caso.

[AngelKrak]

y si pones todo tu codigo completo en un Codepen? para poder ayudarte mejor y ver el problema?

[pzin]

No, no tiene que poner todo el código. Solo el código mínimo necesario para ver el problema.

Que trabaje el que pregunta también un poco.

[CarlosMilles]

Iniciado por pzin

No, no tiene que poner todo el código. Solo el código mínimo necesario para ver el problema.

Que trabaje el que pregunta también un poco.

Es la primera vez que empleo esto del pencode, espero hacerlo bien!

He procurado quitar código innecesario!! :P

Yo creo viene con que yo el desplegable lo tengo en el contenedor cabecera y que cuando este supera este y pasa al contenedor del cuerpo se cierra.

(PD: No se porque en la página esta donde pongo el código, no se despliega... :(

http://codepen.io/CarlosMilles/pen/rObYwo