<!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>
添加回答
举报
0/150
提交
取消