
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var odv=document.getElementById('box');
var nav_big=getElement(odv,"nav_big")[0];
var nav_small=getElement(odv,"nav_small")[0];
var oli_big=nav_big.getElementsByTagName('li');
var oul_small=nav_small.getElementsByTagName('ul');
var oa_big=[];
for(var i=0;i<oli_big.length;i++)
{ oli_big[i].index=i;
oli_big[i].onmouseover=function(){
this.style.background="#F99";
Move(oul_small[this.index],'top',0);
}
oli_big[i].onmouseout=function(){
this.style.background="";
Move(oul_small[this.index],'top',-150);
}
}
for(var n=0;n<oul_small.length;n++)
{ var oli_small=oul_small[n].getElementsByTagName('li');
oul_small[n].style.top=-oul_small[n].offsetHeight+"px";
for(var j=0;j<oli_small.length;j++)
{
oli_small[j].onmouseover=function(){
this.style.background="#FF3";
}
oli_small[j].onmouseout=function(){
this.style.background="";
}
}
}
}
function getStyle(obj,name){
if(obj.currentStyle)
{ return obj.currentStyle[name];}
else {return getComputedStyle(obj,false)[name];}
}
function Move(obj,cssname,itraget){
var speed="";
obj.timer=null;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var curr=parseInt(getStyle(obj,cssname));
speed=parseFloat((itraget-curr)/6);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr==itraget)
{clearInterval(obj.timer);}
else{ obj.style[cssname]=curr+speed+"px"; }
},30);
}
function getElement(obj,classvlue){
var oall=obj.getElementsByTagName('*');
var arr=[];
for(var i=0;i<oall.length;i++)
{
if(oall[i].className==classvlue)
{
arr.push(oall[i]);
}
}
return arr;
}
</script>
<style>
*{
padding:0px;
margin:0px;
}
ul{list-style-type:none;}
a{
text-decoration: none;
}
#box {
position:absolute;
background:#CCC;
height:230px;
width:700px;
left:280px;
}
.nav_small {
position: absolute;
height: 150px;
width: 700px;
top: 80px;
background-color: #FFF;
}
.nav_big{
list-style-type:none;
height:80px;
width:700px;
background:#FCC;
margin:0px auto;
position:absolute;
top:0px;
left:0px;
z-index: 2;
}
.nav_big li{
border: 1px solid black;
border-radius: 20px;
font-size: 25px;
font-family: "华文行楷";
float: left;
width: 120px;
height: 20px;
margin: 10px 0px 10px 10px;
text-align: center;
padding: 20px;
}
.small1{
position: absolute;
width: 160px;
height: 90px;
text-align: center;
left: 10px;
background-color: #FFC;
z-index: 1;
}
.small1 li{
margin-bottom: 10px;
}
.small2{
position:absolute;
width:160px;
height:150px;
background:#FFC;
text-align:center;
left:180px;
z-index: 1;
}
.small2 li{margin-bottom:10px;}
.small3{
position:absolute;
width:160px;
height:60px;
background:#FFC;
text-align:center;
left:350px;
z-index: 1;
}
.small3 li{margin-bottom:10px;}
.small4{
position:absolute;
width:160px;
height:150px;
background:#FFC;
text-align:center;
left:520px;
z-index: 1;
}
.small4 li{margin-bottom:10px;}
</style>
</head>
<body>
<div id="box">
<ul class="nav_big">
<li><a href="javascript=:;">游戏</a></li>
<li><a href="javascript=:;">漫画</a></li>
<li><a href="javascript=:;">动画</a></li>
<li><a href="javascript=:;">轻小说</a></li>
</ul>
<div class="nav_small">
<ul class="small1">
<li><a href="javascript=:;">FGO</a></li>
<li><a href="javascript=:;" >FPS</a></li>
<li><a href="javascript=:;">RBG</a></li>
</ul>
<ul class="small2">
<li><a href="javascript=:;">妖尾</a></li>
<li><a href="javascript=:;">海贼</a></li>
<li><a href="javascript=:;">死神</a></li>
<li><a href="javascript=:;">火影</a></li>
</ul>
<ul class="small3">
<li><a href="javascript=:;">luck star</a></li>
<li><a href="javascript=:;">angle best</a></li>
</ul>
<ul class="small4">
<li><a href="javascript=:;">冰菓</a></li>
<li><a href="javascript=:;">凉宫</a></li>
<li><a href="javascript=:;">春物</a></li>
<li><a href="javascript=:;">烟草</a></li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var odv=document.getElementById('box');
var nav_big=getElement(odv,"nav_big")[0];
var nav_small=getElement(odv,"nav_small")[0];
var oli_big=nav_big.getElementsByTagName('li');
var oul_small=nav_small.getElementsByTagName('ul');
var oa_big=[];
for(var i=0;i<oli_big.length;i++)
{ oli_big[i].index=i;
oli_big[i].onmouseover=function(){
this.style.background="#F99";
Move(oul_small[this.index],'top',0);
}
oli_big[i].onmouseout=function(){
this.style.background="";
Move(oul_small[this.index],'top',-150);
}
}
for(var n=0;n<oul_small.length;n++)
{ var oli_small=oul_small[n].getElementsByTagName('li');
oul_small[n].style.top=-oul_small[n].offsetHeight+"px";
for(var j=0;j<oli_small.length;j++)
{
oli_small[j].onmouseover=function(){
this.style.background="#FF3";
}
oli_small[j].onmouseout=function(){
this.style.background="";
}
}
}
}
function getStyle(obj,name){
if(obj.currentStyle)
{ return obj.currentStyle[name];}
else {return getComputedStyle(obj,false)[name];}
}
function Move(obj,cssname,itraget){
var speed="";
obj.timer=null;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var curr=parseInt(getStyle(obj,cssname));
speed=parseFloat((itraget-curr)/6);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr==itraget)
{clearInterval(obj.timer);}
else{ obj.style[cssname]=curr+speed+"px"; }
},30);
}
function getElement(obj,classvlue){
var oall=obj.getElementsByTagName('*');
var arr=[];
for(var i=0;i<oall.length;i++)
{
if(oall[i].className==classvlue)
{
arr.push(oall[i]);
}
}
return arr;
}
</script>
<style>
*{
padding:0px;
margin:0px;
}
ul{list-style-type:none;}
a{
text-decoration: none;
}
#box {
position:absolute;
background:#CCC;
height:230px;
width:700px;
left:280px;
}
.nav_small {
position: absolute;
height: 150px;
width: 700px;
top: 80px;
background-color: #FFF;
}
.nav_big{
list-style-type:none;
height:80px;
width:700px;
background:#FCC;
margin:0px auto;
position:absolute;
top:0px;
left:0px;
z-index: 2;
}
.nav_big li{
border: 1px solid black;
border-radius: 20px;
font-size: 25px;
font-family: "华文行楷";
float: left;
width: 120px;
height: 20px;
margin: 10px 0px 10px 10px;
text-align: center;
padding: 20px;
}
.small1{
position: absolute;
width: 160px;
height: 90px;
text-align: center;
left: 10px;
background-color: #FFC;
z-index: 1;
}
.small1 li{
margin-bottom: 10px;
}
.small2{
position:absolute;
width:160px;
height:150px;
background:#FFC;
text-align:center;
left:180px;
z-index: 1;
}
.small2 li{margin-bottom:10px;}
.small3{
position:absolute;
width:160px;
height:60px;
background:#FFC;
text-align:center;
left:350px;
z-index: 1;
}
.small3 li{margin-bottom:10px;}
.small4{
position:absolute;
width:160px;
height:150px;
background:#FFC;
text-align:center;
left:520px;
z-index: 1;
}
.small4 li{margin-bottom:10px;}
</style>
</head>
<body>
<div id="box">
<ul class="nav_big">
<li><a href="javascript=:;">游戏</a></li>
<li><a href="javascript=:;">漫画</a></li>
<li><a href="javascript=:;">动画</a></li>
<li><a href="javascript=:;">轻小说</a></li>
</ul>
<div class="nav_small">
<ul class="small1">
<li><a href="javascript=:;">FGO</a></li>
<li><a href="javascript=:;" >FPS</a></li>
<li><a href="javascript=:;">RBG</a></li>
</ul>
<ul class="small2">
<li><a href="javascript=:;">妖尾</a></li>
<li><a href="javascript=:;">海贼</a></li>
<li><a href="javascript=:;">死神</a></li>
<li><a href="javascript=:;">火影</a></li>
</ul>
<ul class="small3">
<li><a href="javascript=:;">luck star</a></li>
<li><a href="javascript=:;">angle best</a></li>
</ul>
<ul class="small4">
<li><a href="javascript=:;">冰菓</a></li>
<li><a href="javascript=:;">凉宫</a></li>
<li><a href="javascript=:;">春物</a></li>
<li><a href="javascript=:;">烟草</a></li>
</ul>
</div>
</div>
</body>
</html>