Lao Gan's " full use of CSS to achieve bilingual navigation menu " in the text of the use of "Position:absolute;left: -999em;" Indent its left into the N-far, and through the "Visibility:hidden;" Physically hide it (is actually a placeholder) and display English navigation at this time. When the hover is triggered, the z-index is defined on, and its absolute position is set to the upper left, set to Visibility:visible, and the span layer is covered on layer a, showing Chinese.
We can also think of a way to use hover to trigger the display property implementation:
The CSS code is modified as follows :
#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;
}
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> Bilingual navigation menu </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, song body, 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;d isplay: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></pead><body> <ul id= "nav" ><li><a href= "index.html" >Home<span> first Page </span></a></li><li><a href= "about.html" >about us<span> About Us </span> </a></li><li><a href= "products.html" >Products<span> product show </span></a> </li><li><a href= "services.html" >Services<span> after-sales service </span></a></li> <li><a href= "contact.html" >Contact<span> Contact Us </span></a></li></ul>< Div id= "NavBar" ></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
