|
作者的blog ：http://www.planabc.net/
老甘的《完全用CSS實現(xiàn)的中英文雙語導航菜單》一文中使用“position: absolute;left: -999em;”將其左縮進N遠，并通過“visibility: hidden;”將其物理隱藏（實際是占位的），此時顯示英文導航。當hover觸發(fā)時，z-index定義在上，并將其絕對定位位置設置為左上，設置visibility: visible;顯示，此時span層覆蓋在a層上，顯示中文。
我們還可以還一種思維使用hover觸發(fā)display屬性實現(xiàn)：
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;
}
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
深入閱讀：
《position:relative/absolute無法沖破的等級》
http://bbs.blueidea.com/thread-2720856-1-1.html
《IE中偽類:hover的使用及BUG》
http://bbs.blueidea.com/thread-2721472-1-1.html
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2722985-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4510.asp 
出處：藍色理想
責任編輯：moby
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
