CSS implementation of bilingual navigation menu in Chinese and English

css| Menu

This is a fully implemented in English and Chinese bilingual navigation menu, no script and pictures, initially, the menu language is English, when the mouse hovers over the menu, it becomes Chinese, of course, you can also do in turn.

Implementation principle:

Xhtml

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

As you can see from the code above, the key to putting Chinese in a span label is to make the properties 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 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;
}

The linked attributes are relative positioning, and the elements in this tag can be used as reference points. In the span element the Chinese is not visible because it is set, so in the initial state, only the English language can be displayed. When the mouse hovers over the menu, the setting in the span element becomes visible, the z axis is 99, and is covered in English, which enables the conversion of the language text.

disadvantage: because the length of the Chinese-English relationship, can not achieve adaptive width, only fixed width.