<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画菜单</title>
<style>
ul {
list-style: none;
}
.top-nav{
font-size: 18px;
/* font-weight: 700; */
font-family: "微软雅黑";
/* list-style: none; */
}
.top-nav li {
float: left;
margin-right: 1px;
}
.top-nav li a {
display: block;
width: 100px;
line-height: 34px;
text-decoration: none;
background: #3f240e;
color: #fff;
text-align: center;
}
.top-nav ul {
display: none;
padding: 0;
position: absolute;
height: 0;
overflow: hidden;
}
.top-nav li a:hover {
background: url('img/bgc.jpg') 0 0 repeat-x;
}
.note {
display: block;
color: yellow;
background: url('img/bgc.jpg') 0 0 repeat-x;
}
.corner {
display: block;
height: 12px;
background: url('img/corner.png') 44px 0 no-repeat;
}
</style>
<script>
window.onload=function(){
var Lis=document.getElementsByTagName("li");
for(i=0;i<Lis.length;i++){
Lis[i].onmouseover=function(){
var u=this.getElementsByTagName("ul")[0];
if(u !=undefined){
u.style.display="block";
AddH(u.id);
}
}
Lis[i].onmousout=function(){
var u=this.getElementsByTagName("ul")[0];
if(u !=undefined){
SubH(u.id);
}
}
}
}
function AddH(id){
var ulList=document.getElementById(id);
var h=ulList.offsetHeight;
h+ = 1;
if(h<=45){
ulList.style.height=h+"px";
setTimeout("AddH('"+id+"')",10);
}
else{
return;
}
}
function SubH(id){
var ulList=document.getElementById(id);
var h=ulList.offsetHeight;
h- = 1;
if(h>0){
ulList.style.height=h+"px";
setTimeout("SubH('"+id+"')",10);
}
else{
ulList.style.display="none";
return;
}
}
</script>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心 +</a>
<ul id="mnuUL">
<span></span>
<li><a href="#">前端课程</a></li>
<li><a href="#">手机开发</a></li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
