<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>Document</title>
<script type="text/javascript">
$(function() {
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
document.onclick = function(e) {
$(".options").css('display', 'none');
}
$(".more").click(function(e) {
$(".options").css('display', 'block');
e = e || event;
stopFunc(e);
})
$(".options").click(function(e) {
e = e || event;
stopFunc(e);
})
})
</script>
<style type="text/css">
.more {
text-decoration: none;
}
.options {
position: absolute;
display: none;
left: 10px;
top: 46px;
background: #fff;
width: 128px;
border: red solid 1px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.options a {
display: block;
line-height: 24px;
height: 24px;
padding-left: 10px;
color: #666;
text-decoration: none;
}
.options a:hover {
background: red;
}
</style>
</head>
<body>
<div id="main" style="position: relative;">
<a href="javascript:void(0)" target="_blank" class="more">更多</a>
<div class="options">
<a href="/ar">العربية</a>
<a href="/de">Deutsch</a>
<a href="/es">Español</a>
<a href="/fa">فارسی</a>
<a href="/fr">Français</a>
<a href="/he">עברית</a>
<a href="/hi">हिन्दी</a>
<a href="/it">Italiano</a>
<a href="/ja">日本語</a>
<a href="/nl">Nederlands</a>
<a href="/pl">Polski</a>
<a href="/pt">Português</a>
<a href="/ro">Română</a>
<a href="/ru">Русский</a>
<a href="/th">ภาษาไทย</a>
<a href="/tr">Türkçe</a>
<a href="/zh">繁體中文</a>
<a href="/en">English</a>
</div>
</div>
</body>
</html>