CSS實(shí)現(xiàn)的中英文雙語導(dǎo)航菜單
這是一個(gè)完全用CSS實(shí)現(xiàn)的中英文雙語導(dǎo)航菜單，無腳本和圖片，初始時(shí)，菜單語言是英文，當(dāng)鼠標(biāo)懸停在菜單上時(shí)，其變成中文，當(dāng)然你也可以反過來做。
實(shí)現(xiàn)原理：
XHTML
<ul id="nav">
<li><a class="bi" href="index.html">Home<span>首 頁</span></a></li>
</ul>
從上面代碼可以看出，中文放在 span 標(biāo)簽里，關(guān)鍵是需要在初始時(shí)，使其的屬性不可見。
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;
}
鏈接的屬性是相對(duì)定位，那在此標(biāo)簽里的元素可將其作為參照點(diǎn)。 在 span 元素里的中文因其設(shè)定了不可見，所以在初始狀態(tài)時(shí)，只能顯示英文。而當(dāng)鼠標(biāo)懸停在菜單上時(shí)， span 元素里的設(shè)定變?yōu)榭梢?，Z軸為99 ，覆蓋在英文上面，從而實(shí)現(xiàn)了語言文字的轉(zhuǎn)換。
缺點(diǎn)：因?yàn)橹杏⑽淖值拈L度關(guān)系，不能實(shí)現(xiàn)自適應(yīng)寬度，只能固定寬度。
最終效果
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
