<!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>
2016-11-08
第一個問題是 -= 和 +=中間不能有空格,第二個問題是onmouseout拼寫錯誤?