DIV+CSS经典——双语导航菜单无JS代码

这个菜单的巧妙之处在于对a:hover伪类的淋漓尽致的应用(用<span>隐藏杀机)，所以不用JS代码，也能实现这种很炫的效果。
怎么看怎么有点像flash的效果呀？呵呵，不多说了，看代码吧！（代码首页显示不下，只好就此截断了，请多包涵。 ^_^）

千江有水千江月，万里无云万里天。

<!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>双语导航菜单--鼠标放上去就能切换语言</title>
<style type="text/css">
* {margin:0;padding:0;}    
#nav{
  padding: 10px 10px 0;
  font: bold 12px Arial, Helvetica, sans-serif,"宋体";
  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: #DDD;
  color: #666;
  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: #FFF;
  background: #DC4E1B;
}

#navbar{
  background: #DC4E1B;
  height: 8px;
  overflow: hidden;
  clear: both;
}

</style>
</head>
<body>
    <ul id="nav">
    <li><a href="index.html">Home<span>首　页</span></a></li>
    <li><a href="about.html">About us<span>关于我们</span></a></li>
    <li><a href="products.html">Products<span>产品展示</span></a></li>
    <li><a href="services.html">Services<span>售后服务</span></a></li>
    <li><a href="contact.html">Contact<span>联系我们</span></a></li>
  </ul>
  <div id="navbar"></div>
</body>
</html>