最近做个多国语言php项目,顺便写个带有国家/地区标志的多国语言(中日韩英)下拉菜单, 简单示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 样式:隐藏语言列表 */
#lnglist {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
z-index: 1;
}
/* 样式:鼠标悬停时显示语言列表 */
#lngselect:hover #lnglist {
display: block;
}
/* 样式:下拉箭头 */
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
display: inline-block;
margin-left: 5px;
vertical-align: middle;
}
/* 样式:链接样式 */
#lnglist li {
padding: 5px;
}
#lnglist li a {
color: #000;
text-decoration: none;
}
#lnglist li a:hover {
background-color: #f5f5f5;
}
/* 样式:语言Logo图标 */
.lang-logo {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="lngselect">
<strong class="zh">
<img class="lang-logo" src="path/to/chinese-logo.png" alt="中文 Logo">
<span>中文</span>
</strong><span class="arrow-down"></span>
<ul id="lnglist">
<li>
<a href="/zh/" target="_self" class="zh">
<img class="lang-logo" src="path/to/chinese-logo.png" alt="中文 Logo">
中文
</a>
</li>
<li>
<a href="/ja/" target="_self" class="ja">
<img class="lang-logo" src="path/to/japanese-logo.png" alt="日本語 Logo">
日本語
</a>
</li>
<li>
<a href="/ko/" target="_self" class="ko">
<img class="lang-logo" src="path/to/korean-logo.png" alt="한국어 Logo">
한국어
</a>
</li>
<li>
<a href="/en/" target="_self" class="en">
<img class="lang-logo" src="path/to/english-logo.png" alt="English Logo">
English
</a>
</li>
</ul>
</div>
</body>
</html>