<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>多級下拉菜單</title>
????<style?type="text/css">
????????#navmenu{
???????????list-style:?none;??
????????}
????????#navmenu?li{
????????????float:?left;
????????????height:?40px;
????????????padding:?0;
????????????position:?relative;
????????}
????????#navmenu?li?a{
????????????text-decoration:?none;
????????????padding:?0?10px;
????????????width:?94px;
????????????text-align:?center;
????????????display:?block;
????????????height:?40px;
????????????line-height:?40px;
????????????background-color:?#111111;
????????????color:#ffffff;
????????}
????????#navmenu?li?ul{
????????????height:?0;
????????????list-style:?none;
????????????display:?none;
????????????position:?absolute;
????????????left:?0;
????????????top:?40px;
????????????padding:?0;
????????????overflow:?hidden;
????????}
????????#navmenu?li?ul?li{
????????????display:block;
????????????float:?left;
????????}
????????#navmenu?li?a:hover{
????????????border-radius:?6px;
????????????background:url(images/slide-pannel_14.png)?0?0?repeat-x;
????????????box-shadow:?0?2px?0?#e4393c;
????????}
????????.note{
????????????color:#eee;
????????????display:?block;
????????????background:url(images/slide-pannel_14.png)?0?0?repeat-x;
????????}
????????.corner{
????????????display:?block;
????????????margin-top:?3px;
????????????height:?11px;
????????????background:?url(images/bird.png)?47px?0?no-repeat;
????????}
????</style>
</head>
<script?type="text/javascript">
?????window.onload=function(){
????????var?lis=document.getElementsByTagName('li');
????????????for?(var?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].onmouseout=function(){
????????????????????var?u=this.getElementsByTagName('ul')[0];
????????????????????if?(u!=undefined)?{???
????????????????????????SubH(u.id);
????????????????????}
????????????????};
????????????};
????};
????function?AddH(id){
????????var?uls=document.getElementById(id);
????????var?h=uls.offsetHeight;
????????h+=1;
????????if?(h<137)?{
????????????uls.style.height=h+"px";
????????????setTimeout("AddH('"+id+"')",20);
????????}else{
????????????return;
????????};
????};
????function?SubH(id){
????????var?uls=document.getElementById(id);
????????var?h=uls.offsetHeight;
????????h-=1;
????????if?(h>0)?{
????????????uls.style.height=h+"px";
????????????setTimeout("SubH('"+id+"')",20);
????????}else{
????????????uls.style.display="none";
????????????return;
????????};
????}
</script>
<body>
????<ul?id="navmenu">
????????<li><a?href="#"?class="note">慕課網首頁</a></li>
????????<li><a?href="#">課程大廳</a>?</li>
????????<li?class="navmenuli"><a?href="#">學習中心+</a>
????????????<ul?id="menUL">
????????????????<span?class="corner"></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>
為什么按照老師的代碼寫完以后，底端有閃爍，我還是有bug
DDjx
2016-01-06 21:17:00
