html5+css 多国语言选择下拉
<style>
#otherLans{
float: right;
position: relative;
z-index: 1000;
}
#otherLans > a {
display: block;
box-sizing: border-box;
color: #fff;
background-color: #3f3f3f;
line-height: 45px;
height: 45px;
margin-top: 8px;
min-width: 138px;
padding-left: 20px;
}
.sub-menu {
position: absolute;
top: 53px;
left: 0;
width: 100%;
background-color: #009fde;
-webkit-opacity: 0;
opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-khtml-opacity: 0;
}
.sub-menu li{
display: block;
width: 100%;
}
.sub-menu li a {
display: block;
width: 100%;
height: 38px;
line-height: 38px;
padding: 0 10px;
font-size: 14px;
color: #fff;
}
.sub-menu li a:hover {
background-color: #4f4f4f;
}
#otherLans:hover ul {
-webkit-opacity: 1;
opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-khtml-opacity: 1;
}
</style>
<div class="fr" id="otherLans">
<a href="#pll_switcher">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAflBMVEX/AAD9AAD3AADxAADrAAD/eXn9bGz8YWH8WVn6UVH5SEj5Pz/3NDT0Kir9/QD+/nL+/lT18lDt4Uf6+j/39zD39yf19R3n5wDxflXsZ1Pt4Y3x8zr0wbLs1NXz8xPj4wD37t3jmkvsUU/Bz6nrykm3vJ72IiL0FBTyDAvhAABEt4UZAAAAX0lEQVR4AQXBQUrFQBBAwXqTDkYE94Jb73+qfwVRcYxVQRBRToiUfoaVpGTrtdS9SO0Z9FR9lVy/g5c99+dKl30N5uxPuviexXEc9/msC7TOkd4kHu/Dlh4itCJ8AP4B0w4Qwmm7CFQAAAAASUVORK5CYII=" alt="Español" style="width: 16px; height: 11px;" width="16" height="11">
<span style="margin-left:0.3em;">Español</span>
<span role="presentation" class="dropdown-menu-toggle"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-18820-ru"><a href="https://mou23-5.ok-3.com/" hreflang="ru-RU" lang="ru-RU"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAdVBMVEX19f/u7vjm5/H+/v75+fng4Ove3ulFRfyysv6cnP6QkPmIiPh/f/YAAOYAAP1ycv5QUP06OvkxMfcoKPcgIPYUFPS0AADdaYzTRG/RPGnOM2LKLFzIIVPCEUZ7AAD0AQH7YGH3ODj0JyfzERDgAAD4TU3pAABIfLuPAAAAT0lEQVR4AQXBAQqDMAAAsZytyHzA/v9LYRS7JIAQMkBb0ATsgLoKInnHvIrHrdRaBzxupTDxuFUifUsp4R3zU4iwzmOyT1ibBtP2u3C+wB+SHBB5JNY7DAAAAABJRU5ErkJggg==" alt="Русский" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">Русский</span></a></li>
<li id="menu-item-18820-es"><a href="https://mou23-2.ok-3.com/" hreflang="es" lang="es"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAflBMVEX/AAD9AAD3AADxAADrAAD/eXn9bGz8YWH8WVn6UVH5SEj5Pz/3NDT0Kir9/QD+/nL+/lT18lDt4Uf6+j/39zD39yf19R3n5wDxflXsZ1Pt4Y3x8zr0wbLs1NXz8xPj4wD37t3jmkvsUU/Bz6nrykm3vJ72IiL0FBTyDAvhAABEt4UZAAAAX0lEQVR4AQXBQUrFQBBAwXqTDkYE94Jb73+qfwVRcYxVQRBRToiUfoaVpGTrtdS9SO0Z9FR9lVy/g5c99+dKl30N5uxPuviexXEc9/msC7TOkd4kHu/Dlh4itCJ8AP4B0w4Qwmm7CFQAAAAASUVORK5CYII=" alt="Español" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">Español</span></a></li>
<li id="menu-item-18820-pt"><a href="https://mou23-4.ok-3.com/" hreflang="pt-PT" lang="pt-PT"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABL0lEQVR4AV2RA2yEQRCFNxcnRVw3qG3bthXUbZxaUaOGRVA7ro2wDWoEtW2b9/b2nHx3v943uztDSAwhAQJ86P83keCJw2HcEAJoqLivmJHbnQt+s7OFfMXHMz5DAgBPCKBCUktSRmdK43Dw3Gz451TIc68nPr+7uLzZWr2Zm78bGLxpa797e1+IC0erUeAmL+ol3R8CEE+/qqvDv2BbwjYi6yJR+6Ys5m5zA0C7HbWEIEy/KCpKC8uzQRf5fkivX3zBZIIw/Swvj8cTKthRIbDGDwcYnXRF7avy/KM5q8NZg2cDPWEaYHt8AceFACBsTdui9nmn8VWmpngawN+ngiEVHCocGM5Vpu8G0rUB5iAS0CKAYwCsg/YB1lPWKESBSCAqhMiKwHQueJwI2BeDC83C2lDIxUCuAAAAAElFTkSuQmCC" alt="Português" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">Português</span></a></li>
<li id="menu-item-18820-ar"><a href="https://mou23-1.ok-3.com/" hreflang="ar" lang="ar"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAANlBMVEUAYjMTYDs3R0AvV0NObzE3dSoTWzhAZjgyfEY0gl1EcDFqpIhKj28TVzaLs41ol1JSaF1JW1NzUHm9AAAAPUlEQVR4AY2MtQEAMAgE447tv2xKvuQqeEtRcikZ/9p6b9X/Mdfeaw4PnPvehQhNvpcnJYiInIqraqYpyAd1AAFxIEreLQAAAABJRU5ErkJggg==" alt="العربية" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">العربية</span></a></li>
<li id="menu-item-18820-ko"><a href="https://mou23-3.ok-3.com/" hreflang="ko-KR" lang="ko-KR"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgACwAQAwERAAIRAQMRAf/EAHQAAAMBAAAAAAAAAAAAAAAAAAMEBQcBAAMBAQAAAAAAAAAAAAAAAAABAgMEEAAAAwUGBAcAAAAAAAAAAAABAgQSAxMFBgARITFBFTIUFgdRIoIjM0M1EQACAQQCAwAAAAAAAAAAAAABAgARITEDYRJRIwT/2gAMAwEAAhEDEQA/ANY7o1hNqOJMKgQzEq0XTlKl2QSgZ0jB8Y4isflILYtMsF4Qxx0sirtZBVp0fKNPf3EqnEa7WVRNaqdIqhmC7lHi9EcBp8wABTQX5iAtcFEzZSHDAc8dbrrUUZbNniRuOstXXXofOZVeQOv135MfaQ44vOsRA+f6YN/qy0sCZGFlsDr5TdtsfbXDUGNzrLWGfswvBnzZX6WUJ//Z" alt="한국인" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">한국인</span></a></li>
<li id="menu-item-18820-vi"><a href="https://mou23-6.ok-3.com/" hreflang="vi" lang="vi"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgACwAQAwERAAIRAQMRAf/EAGgAAAMAAAAAAAAAAAAAAAAAAAABBQEBAQEBAAAAAAAAAAAAAAAAAAQGBxAAAQIFAwUAAAAAAAAAAAAAAQIDABESBAUhMQZBoSIyUhEAAQMEAwAAAAAAAAAAAAAAAQACA/AREgRBsQX/2gAMAwEAAhEDEQA/AInG8Yzl+QW+Purs2rLyzU9Iq0TNShuKZpB8jtGL9DZdDC57RkRxXS65tymKIvaMiE+S4xjEchuMfa3ZumWVih2RTouSkiczVJJHkN4efsunha9wxJ4rpNSYyxB7hiSpblFa/Xr994tKpF7IborR69PvtBDey//Z" alt="Tiếng Việt" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">Tiếng Việt</span></a></li>
<li id="menu-item-18820-in"><a href="https://mou23-7.ok-3.com/" hreflang="hi-IN" lang="hi-IN"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgACwAQAwERAAIRAQMRAf/EAGsAAAMBAAAAAAAAAAAAAAAAAAABBwgBAQADAQAAAAAAAAAAAAAAAAAEBQYHEAABAwMDBQEAAAAAAAAAAAACAQMEABIFETFRIVITMwZCEQACAQIHAAAAAAAAAAAAAAAAAQIRA1GBkdGSBRb/2gAMAwEAAhEDEQA/AK9kMN83GhvyGs+zIdaAjCODrCEap1tTU6zMeitN0d2mm5dejjhHkLHYb5qTDYkO59mO66AmUc3WLgVfyuh0l0NpOiu103Ho44R5Ga3LPIXp3Xv5qIzlryBuzyD6d07+aILI/9k=" alt="हिन्दी" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">हिन्दी</span></a></li>
<li id="menu-item-18820-fa"><a href="https://mou23-8.ok-3.com/" hreflang="fa" lang="fa"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgACwAQAwERAAIRAQMRAf/EAGgAAAMBAAAAAAAAAAAAAAAAAAABBgcBAQEBAQAAAAAAAAAAAAAAAAAFBAcQAAIBAgUFAQAAAAAAAAAAAAIDAQASESExEwZRUjMEBzIRAAICAQUAAAAAAAAAAAAAAAECABExQVGhggb/2gAMAwEAAhEDEQA/ALf2/lXElJa4OXA4wgihIEi4pjO2MWa1nKrvJq+acmrcdTD1PlXE2pU4uXAoziClJki4ZnO2cGa0CrvDeadTlz1Mw1lm4Xi1nv61InfluteI1be4Hi/Ud/Wghro54n//2Q==" alt="فارسی" style="width: 16px; height: 11px;" width="16" height="11"><span style="margin-left:0.3em;">فارسی</span></a></li>
</ul>
</div>
