老甘的《完全用CSS實現的中英文雙語導覽功能表》一文中使用“position: absolute;left: -999em;”將其左縮排N遠，並通過“visibility: hidden;”將其物理隱藏（實際是佔位的），此時顯示英文導航。當hover觸發時，z-index定義在上，並將其絕對位置位置設定為左上，設定visibility: visible;顯示，此時span層覆蓋在a層上，顯示中文。
我們還可以還一種思維使用hover觸發display屬性實現：
CSS代碼修改如下：
#nav li a,#nav li a:hover span {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
#nav li a span {
display:none;
}
#nav a:hover {
position: relative;
}
#nav a:hover span {
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
}
#nav a:hover span {
padding-top:2px;
}
#nav li a:hover,#nav li a:hover span {
color: #FFFFFF;
background: #DC4E1B;
}
運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>中英文雙語導覽功能表</title><style type="text/css">* {margin:0;padding:0;} #nav{padding: 10px 10px 0;font-size: 12px;font-weight: bold;font-family:Arial, Helvetica, sans-serif,宋體;margin: 1em 0 0;list-style:none;}#nav li{float: left;margin-right: 1px;}#nav li a,#nav li a:hover span{line-height: 20px;text-decoration: none;background: #DDDDDD;color: #666666;display: block;width: 80px;text-align: center;overflow:hidden;}#nav li a span{display:none;}#nav a:hover{position: relative;}#nav a:hover span{display:block;position:absolute;top: 0;left: 0;cursor: pointer;}#nav a:hover span{ padding-top:2px;}#nav li a:hover,#nav li a:hover span{color: #FFFFFF;background: #DC4E1B;}#navbar{background: #DC4E1B;height: 8px;overflow: hidden;clear: both;}</style></head><body> <ul id="nav"><li><a href="index.html">Home<span>首 頁</span></a></li><li><a href="about.html">About us<span>關於我們</span></a></li><li><a href="products.html">Products<span>產品展示</span></a></li><li><a href="services.html">Services<span>售後服務</span></a></li><li><a href="contact.html">Contact<span>聯絡我們</span></a></li></ul><div id="navbar"></div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
