Desplegable

[CarlosMilles]

1-. Buenas tengo este código y quería poner una bandera al costado de cada idioma, el problema, es que o no me sale o se me superpone etc...

¿Que es lo que tendría que poner? Se que es absurdo, pero me está dando muchos problemas.

2-. Donde pone idioma actual me gustaría que apareciese, el idioma que esté en ese momento la página y su respectiva bandera. Tampoco me sale

Os dejo el código:

HTML

Código HTML:

<div class="wrapper">
        <ul class="DropdownIdiomas">
            <li class="active">Idioma actual</li>
            <li class="first"><a href="#">Español</a></li>
            <li><a href="#">Mallorquí</a></li>
            <li class="last"><a href="#">English</a></li>
        </ul>
 

CSS

Código CSS:

ul.DropdownIdiomas{
    width: 200px;
    border: 1px solid #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #1a1a1a;
    margin-top: 2em;
}
ul.DropdownIdiomas li{
    display: none;
    font-size: 12px;
}
ul.DropdownIdiomas li.active{
    display: block;
    color: #8c8c8c;
    font-size: 14px;
    padding: 12px;
    color: #555;
    border-top: 1px solid #313131;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
ul.DropdownIdiomas li.active {
    padding-right: 24px;
    color: #8c8c8c;
}
ul.DropdownIdiomas li a{
    display: block;
    text-decoration: none;
    padding: 8px 8px 8px 10px;
    background: #1e1e1e;
    border-bottom: 1px solid #171717;
}
ul.DropdownIdiomas li.last a{
    border:0;
}
ul.DropdownIdiomas li.first a{
    border-top: 3px solid #131313;
}
ul.DropdownIdiomas li a:hover{
    background: #232323;
    color: #fff;
    padding-left: 11px;
}
 

GRACIAS!! Disculpad por estas preguntas de novato!