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. And 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 language and text. Disadvantage: Because the length of the Chinese-English relationship, can not achieve adaptive width, only fixed width.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" "lang=" en "><pead><meta http-equiv=" Content-type "Content=" text/html; Charset=utf-8 "/><meta name=" Keywords "content=" bilingual menu, bilingual menu in Chinese and English "/><meta http-equiv=" Content= "Full CSS Bilingual navigation menu"/><meta content= "All" name= "/><meta http-equiv=" Pragma "content=" No-cache "/><meta name=" author "content=" Forestgan "/><meta" name= "Copyright" content= "Forestgan"/> <title> Chinese-English bilingual navigation menu </title><style type= "text/css" >a{color: #FFFF99; text-decoration:none; a:hover{color: #FFFFFF; text-decoration:underline;} #nav {padding:10px 10px 0; font-size:12px; font-weight:bold; margin:1em 0 0; list-style:none;} #nav li{float:left; margin-right:1px;}. 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; w idth:80px; Text-align:center;} #nav li a:hover,.bi:hover span{color: #FFFFFF; background: #DC4E1B;}. Bi:hover span{padding-top:2px;} #navbar {background: #DC4E1B; height:8px; overflow:hidden; clear:both;} </style><link href= ". /css/main.css "rel=" stylesheet "type=" Text/css "/></pead><body><div id=" Top "> <ul id=" NAV " > <li><a class= "bi" href= "index.html" >Home<span> home </span></a></li> <li ><a class= "bi" href= "about.html" >about us<span> about Us </span></a></li> <li> <a class= "bi" href= "products.html" >Products<span> product show </span></a></li> <li> <a class= "bi" href= "services.html" >Services<span> after-sales service </span></a></li> <li><a class= "bi" href= "contact.html" >Contact<span> Contact Us </span></ a></li> </ul> <div id= "NavBar" ></div></div><div id= "Footer" > <address> Design by <a href= "Http://www.forest53.com" >forestgan</a> This demo uses <a href= "http:// www.creativecommons.cn/"> Creative Commons Authorized </a>--signature and non-commercial use. <a href= "Javascript:history.back ()" >Back</a> </address></div><script src= " Http://www.google-analytics.com/urchin.js "type=" Text/javascript "></script><script type=" text/ JavaScript ">_UACCT =" ua-152060-1 "; Urchintracker (); </script><noscript>google-analytics</ Noscript><script src= "http://www.forest53.com/stat/mystat.asp?siteid=1" type= "Text/javascript" ></ Script><noscript>stat.</noscript></body></ptml><script language= "Javascript" > var now = new Date (); document.write (" <noscript> </ Noscript>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
