中英文双语导航菜单且带有二级菜单
<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.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=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>