<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
ul,ol{list-style:none;}
nav{width:100%; height:50px; background:#f00;}
#navContainer{width:80%; height:50px; background:#ccc; margin:0px auto; z-index:100; position:relative; z-index:100;}
#navContainer li{width:80px; height:50px; float:left; background:#ccc;}
#navContainer a{display:block; width:80px; height:50px; float:left; text-decoration:none; text-align:center; line-height:50px;}
#navContainer a:hover{background:#39F;}
#navContainer ol{width:80px;}
#subNav{display:none;}
</style>
<script>
window.onload=function(){
//父节点parentNode 子节点childNodes 同胞节点nextSibling
var ulObj = document.getElementById("navContainer");
var liObjs = ulObj.childNodes;//包括 标签1 属性2 文本3
for(var i =0;i<liObjs.length;i++){
if(liObjs.item(i).nodeType==1){ //nodeType 对象的类型:标签1 属性2 文本3 注释8
liObjs.item(i).onmouseover=function(){
this.getElementsByTagName("ol")[0].style.display="block";
}
liObjs.item(i).onmouseout=function(){
this.getElementsByTagName("ol")[0].style.display="none";
}
}
}
}
</script>
</head>
<body>
<nav>
<ul id="navContainer">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
</ul>
</nav>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
ul,ol{list-style:none;}
nav{width:100%; height:50px; background:#f00;}
#navContainer{width:80%; height:50px; background:#ccc; margin:0px auto; z-index:100; position:relative; z-index:100;}
#navContainer li{width:80px; height:50px; float:left; background:#ccc;}
#navContainer a{display:block; width:80px; height:50px; float:left; text-decoration:none; text-align:center; line-height:50px;}
#navContainer a:hover{background:#39F;}
#navContainer ol{width:80px;}
#subNav{display:none;}
</style>
<script>
window.onload=function(){
//父节点parentNode 子节点childNodes 同胞节点nextSibling
var ulObj = document.getElementById("navContainer");
var liObjs = ulObj.childNodes;//包括 标签1 属性2 文本3
for(var i =0;i<liObjs.length;i++){
if(liObjs.item(i).nodeType==1){ //nodeType 对象的类型:标签1 属性2 文本3 注释8
liObjs.item(i).onmouseover=function(){
this.getElementsByTagName("ol")[0].style.display="block";
}
liObjs.item(i).onmouseout=function(){
this.getElementsByTagName("ol")[0].style.display="none";
}
}
}
}
</script>
</head>
<body>
<nav>
<ul id="navContainer">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
<li>
<a href="#">产品中心</a>
<ol id="subNav">
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
<li>
<a href="#">标题</a>
</li>
</ol>
</li>
</ul>
</nav>
</body>
</html>