<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../css/default.css"> <script src="../js/main.js"></script> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var li=document.getElementsByTagName('li');//先获取到li for (var i = 0; i < li.length; i++) { li[i].onmouseover=function(){ var subNav=this.getElementsByTagName('ul')[0];//获取到ul下的第一个元素 if(subNav!=null){//判断是否还有元素，若没有判断则会报obj.timer undefined错误 startMove(subNav,{height:120}); }}; li[i].onmouseout=function(){ var subNav=this.getElementsByTagName('ul')[0]; if(subNav!=null){ startMove(subNav,{height:0}); }}; } }; </script> </head> <body> <ul class='nav'> <li><a href="#">一级菜单</a> <ul class='subNav'> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a> <ul class='subNav'> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a> <ul class='subNav'> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a> <ul class='subNav'> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </body> </html>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.nav {
490px;
position: absolute;
margin-left: 150px;
border-bottom: 5px solid #F93;
}
.nav li {
float: left;
height: 30px;
margin-left: 2px;
}
.nav li a {
display: block;
120px;
height: 30px;
text-align: center;
background: #ccc;
line-height: 30px;
}
.nav li a:hover {
background: #F93;
}
.subNav {
120px;
height: 0px;
overflow: hidden;
}
.subNav li a {
margin-left: -2px;
}
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; for (var attr in json) { var speed = 0; var icur = 0; if (attr == 'opacity') { icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { icur = parseInt(getStyle(obj, attr)); } speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (json[attr] != attr) { flag = false; } if (attr == 'opacity') { obj.style[attr] = (icur + speed) / 100; obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')'; } else { obj.style[attr] = icur + speed + 'px'; } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } } }, 30); }
二级标签css样式几个关键位置
.nav即包裹层的宽度限制着一级标签的个数。
.nav li{
height:30px;//和.nav li a {height:30px;要相等}
}
把.nav布局固定。去掉的话，底边框会被撑开。
.nav li a{
120px;//决定着二级标签的宽度
}
.subNav {
120px;//二级标签的宽度,去除的话布局会乱
height: 0px;
overflow: hidden;//height:0px,和overflow:hidden2者共同决定二级标签的隐藏
}