In Lao Gan's "navigation menu in Chinese and English with CSS", use "position: absolute; left:-999em;" to indent left N far, and use "visibility: hidden; "hides it physically (actually a placeholder) and displays the English navigation. When hover is triggered, z-index is defined on, and its absolute position is set to the upper left, with visibility: visvisible; displayed. In this case, the span layer overwrites layer a and displays Chinese characters.
We can also use hover to trigger the display attribute 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> navigation menu in both Chinese and English </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,;
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;
Display: block;
Width: 80px;
Text-align: center;
1st 2 pages