//--------------------使用多层嵌套完成对不同级的控制最终实现二级菜单
/*HTML中标签没有完全放置，后面5项list没有放置*/
<html>
<head><title>subnavMeau</title></head>
<style type="text/css">
body,li,div,ul{margin: 0px;padding: 0px;}
li{list-style: none;}
body{font-size: 20px;font-weight: bold;text-align: center;}
#nav li{float: left; 200px;background: url("pic/navBg.png");}
.clear{clear: both;float: none;}
#subMeau div{float: left; 200px;}
.subnav{visibility: hidden;background: url("pic/subNav.png");}
li div{float: left;background-image: "pic/navBg.png"}
.options{background: gray;position: absolute; 100px;background: url("pic/list.png");}
</style>
<script type="text/javascript">
window.onload=function(){
var i;
var oLi=document.getElementsByTagName('li');
var oSub=document.getElementsByClassName('subnav');
var oList=document.getElementsByClassName('list');
oOption=document.getElementsByClassName('options');
var Timer=new Array(oOption.length);
for(i=0;i<3;i++){
oLi[i].index=i;
oSub[i].style.visibility='hidden';
oLi[i].onclick=function(){
value=oSub[this.index].style.visibility;
for(i=0;i<3;i++){
oSub[i].style.visibility='hidden';
}
if(value=="hidden"){
oSub[this.index].style.visibility='visible';
}
if(value=="visible"){
oSub[this.index].style.visibility='hidden';
}
}
}
for(i=0;i<oOption.length;i++){
oList[i].index=i;
oOption[i].index=i;
oOption[i].style.display="none";
oList[i].onmouseover=function(){
oOption[this.index].style.display="block";
offset=this.index%4;
oOption[this.index].style.left=Math.floor(this.index/4)*200+150+'px';
oOption[this.index].style.top=offset*17+23+'px';
}
oOption[i].onmouseout=oList[i].onmouseout=function(){
mid=this.index;
Timer[mid]=setTimeout(function(){
oOption[mid].style.display="none";
},5);
}
oOption[i].onmouseover=function(){
clearTimeout(Timer[this.index]);
}
}
}
</script>
<body>
<div id="nav">
<ul>
<li>IOS</li>
<li>Andriod</li>
<li>Windows</li>
</ul>
</div>
<div class="clear"> </div>
<div id="subMeau">
<div class="subnav">
<ul >
<li class="list">iMac</li>
<div class="options">
<ul>
<li>Mac</li>
<li>Macmini</li>
<li>MacPro</li>
</ul>
</div>
<li class="list">iTouch</li>
<div class="options">
<ul>
<li>Touch</li>
<li>Touchmini</li>
<li>TouchPro</li>
</ul>
</div>
<li class="list">iPhone</li>
<div class="options">
<ul>
<li>Phone5</li>
<li>Phone6</li>
<li>Phone6plus</li>
</ul>
</div>
<li class="list">iWatch</li>
<div class="options">
<ul>
<li>Mac</li>
<li>Macmini</li>
<li>MacPro</li>
</ul>
</div>
</ul>
</div>
<div class="subnav" >
<ul>
<li class="list">sunsung</li>
<li class="list">HTC</li>
<li class="list">ZTE</li>
<li class="list">Huawei</li>
</ul>
</div>
<div class="subnav" id="tes">
<ul>
<li class="list">WindowsPhone</li>
<li class="list">Windows7</li>
<li class="list">Vista</li>
<li class="list">WindowsXP</li>
</ul>
</div>
</div>
<div class="options">
<ul>
<li>Mac1</li>
<li>Macmini</li>
<li>MacPro</li>
</ul>
</div>
<div class="options">
<ul>
<li>Mac2</li>
<li>Macmini</li>
<li>MacPro</li>
</ul>
</div>
<div class="options">
<ul>
<li>Mac3</li>
<li>Macmini</li>
<li>MacPro</li>
</ul>
</div>
</html>