The default language selector is pretty crap TBH.
I created this function using jQuery, you will have to amend to fit your template.
function language_selector(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
$current_lang = ICL_LANGUAGE_CODE;
if(!empty($languages)) { ?>
<div id="language_list">
<div class="current">
<img src="https://wordpress.stackexchange.com/questions/95978/<?php bloginfo("url'); ?>/wp-content/plugins/sitepress-multilingual-cms/res/flags/<?php echo ICL_LANGUAGE_CODE; ?>.png" alt="<?php echo ICL_LANGUAGE_NAME; ?>" /> <?php echo ICL_LANGUAGE_NAME; ?> <i class="icon-chevron-down"></i>
</div>
<ul>
<?php foreach($languages as $l): ?>
<?php if($l['active']) continue; ?>
<li>
<a href="<?php echo $l['url']; ?>"><img src="<?php echo $l['country_flag_url']; ?>" alt="<?php echo $l['native_name']; ?>" /> <?php echo $l['native_name']; ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
var languageSelector = $('#header .additional .language');
var currentLanguage = $('.current', languageSelector);
var languagesSelection = $('ul', languageSelector);
var toggleLanguageSelector = function() {
if( !languagesSelection.is(':visible') ) {
currentLanguage.addClass('active');
languagesSelection.slideDown(300);
} else {
currentLanguage.removeClass('active');
languagesSelection.hide();
}
};
currentLanguage.bind('click', toggleLanguageSelector);
});
</script>
<?php
}
}
Then implement like so:
<div class="language">
<span><?php _e('Choose Language', 'theme_text_domain'); ?></span>
<?php language_selector(); ?>
</div>
Try this and see if it works, obviously I will leave the CSS to you.