how to design a two-language navigation with CSS

Hi, recently,i found a new design technology of CSS,that is how to design a two-languange navigation with css.Do you know what does it mean?In fact,that means the words of the navigation are different with your mouse on and off it.Now,let me tell how to achieve this effect.

HTML:

And then,Here is css code:
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: #eaf4f7;
color: #666666;
display: block;
width: 80px;
text-align: center;
}

#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #90d9f1;
}

.bi:hover span{
padding-top: 2px;
}

#navbar{
background: #90d9f1;
height: 7px;
overflow: hidden;
clear: both;
}

Finish.Do you want to know what will the effect be?Just have a try.