中英文双语导航菜单且带有二级菜单

<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.className+=" over";
}
node.οnmοuseοut=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.οnlοad=startList;
</script>
<style type="text/css">
#nav{
  padding: 10px 10px 0;
  font-size: 12px;
  font-weight: bold;
  margin: 1em 0 0;
  list-style:none;
}
#nav li{margin-right: 1px;border: 1px solid #FFFFFF;}
.bi{
  position: relative;
  z-index: 0;
  margin-right:15px;
  list-style:none;
  text-decoration:none;
}
.bi:hover{z-index: 99;}
.bi:hover span{
  visibility: visible;
  top: 0;
  left: 0;
  cursor: pointer;
}
.bi span{
  position: absolute;
  left: -999em;
  visibility: hidden;
  list-style:none;
  text-decoration:none;
}
#nav li a,.bi:hover span{
  line-height: 20px;
  text-decoration: none;
  background: #DDDDDD;
  color: #666666;
  display: block;
  width: 80px;
  text-align: center;
  height:20px;
}
#nav li a:hover,.bi:hover span{color: #FFFFFF;background: #DC4E1B;}
#nav li ul {
  position: absolute;
  left:92px;
  top: 20px;
  display: none;
  text-decoration:none;
  }
#nav ul li a:hover { color: #E2144A; background: #f9f9f9; text-decoration:none;}
#nav li:hover ul, li.over ul { display: block; text-decoration:none; list-style:none;}
</style>

<div id="top">
<ul id="nav">
    <li><a class="bi" href="#">Home<span>首　页</span></a></li>
    <li><a class="bi" href="#">About us<span>关于我们</span></a>
    <ul id="nav">
   <li><a href="#" class="bi">About us1<span>关于我们1</span></a></li>
   <li><a href="#" class="bi">About us2<span>关于我们2</span></a></li>
   <li><a href="#" class="bi">About us3<span>关于我们3</span></a></li>
   </ul>
   </li>
    <li><a class="bi" href="#">Products<span>产品展示</span></a></li>
    <li><a class="bi" href="#">Services<span>售后服务</span></a></li>
    <li><a class="bi" href="#">Contact<span>联系我们</span></a></li>
  </ul>
</div>

转载于:https://www.cnblogs.com/J-Si/archive/2012/05/15/2501523.html