Navigation menu in Chinese and English with CSS

This is a Chinese/English navigation menu fully implemented with CSS. It has no scripts or images. Initially, the menu language is English. When you hover your mouse over the menu, it becomes Chinese, of course, you can do it in turn.

Implementation principle: XHTML

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

From aboveCodeIt can be seen that the key to placing Chinese characters in the span tag is to make the attributes invisible at the beginning.

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 ,. 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 ;}

The link property is relative positioning, so the elements in this tag can be used as reference points. Because the Chinese characters in the span element are set to invisible, only English characters can be displayed in the initial state. When you hover the mouse over the menu, the settings in the span element become visible, and the Z axis is 99, which covers English, thus realizing the conversion of language and text.

Disadvantage: due to the length relationship between Chinese and English characters, adaptive width cannot be achieved and the width can only be fixed.

Final Effect