完全にCSSで実現した中国語と英語のバイリンガルナビゲーションメニュー

これは完全にCSSで実現された中国語と英語のバイリンガルナビゲーションメニューで、スクリプトと画像がなく、初期の時、メニュー言語は英語で、マウスがメニューにぶら下がっていると、中国語になります.もちろん、逆にすることもできます.

実現原理：

XHTML

<ul id="nav">
<li><a class="bi" href="index.html">Home<span> 　 </span></a></li>
</ul>

上のコードから分かるように、中国語はspanラベルに置かれており、初期に属性を表示しないことが重要です.

CSS

.bi{
	position: relative;
	z-index: 0;
}

.bi:hover{
	z-index: 99;
}

.bi:hover span{
	visibility: visible;
	top: 0;
	left: 0;
	cursor: pointer;
}

.bi span{
	position: absolute;
	left: -999em;
	visibility: hidden;
}

#nav li a,.bi:hover span{
	line-height: 20px;
	text-decoration: none;
	background: #DDDDDD;
	color: #666666;
	display: block;
	width: 80px;
	text-align: center;
}

#nav li a:hover,.bi:hover span{
	color: #FFFFFF;
	background: #DC4E1B;
}

.bi:hover span{
	padding-top: 2px;
}

リンクのプロパティは相対的に配置され、このラベルの要素は参照点として使用できます.span要素の中の中国語は設定が見えないため、初期状態では英語しか表示できません.マウスをメニューに置くと、span要素の設定が表示され、Z軸が99で英語に覆われ、言語文字の変換が実現します.
欠点:中英文字の長さ関係のため、適応幅を実現できず、幅を固定するしかない.
ファイナルエフェクト