                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

实现不了隐藏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">

/* CSS Document */
html, body, ul, li {
padding: 0;
margin: 0;
}

body {
font: 10pt;
}

ul, li {
list-style-type: none;
text-transform: capitalize;
}

.clear {
clear: both;
*display: inline;
}

/*menu*/
#menu {
margin: 100px auto;
display: block;
width: 1000px;
height: 34px;
}

#nav {
display: block;
}

#nav .mainlevel {
float: left;
background: #3f240e;
text-align: center;
display: block;
}

#nav .mainlevel a {
color: #fff;
text-decoration: none;
line-height: 34px;
height: 34px;
text-align: center;
padding: 0 20px;
display: block;
_width: 48px;
}

#nav .mainlevel a:hover {
color: #3f240e;
text-decoration: none;
background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
}

#nav .mainlevel ul {
position: absolute;
display: none;
*width: 2000px;
height: 0;
overflow: hidden;
}

#nav .mainlevel li {
float: left;
background: #3f240e;
}

#nav .mainlevel li a {
padding: 0 12px;
line-height: 24px;
height: 24px;
display: block;
_padding-bottom: 6px;
}

#nav .mainlevel li a:hover {
color: #3f240e;
text-decoration: none;
background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
}

#nav li a em
{
padding: 0 3px;
}

.note {
color: #3f240e;
border-right: 1px solid #fff;
background: #678900 url(images/slide-pannel_14.png) 0 0 repeat-x;
display: block;
line-height: 34px;
padding: 0 3em;
}

.Triangle_con {
height: 9px;
background: url(images/bird.png) 36px 0 no-repeat;
display: block;
_margin-bottom: -6px;
}

.log {
margin: 100px auto;
width: 1000px;
text-transform: capitalize;
line-height: 200%;
}
</style>
<script>
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';
mouseDown(u.id);
}

};
lis[i].onmouseout = function () {
var u = this.getElementsByTagName('ul')[0];
if (u != undefined) {
mouseLeaves(u.id);
}
}
}
};
function mouseDown(id) {
var ulist = document.getElementById(id);
var listH = ulist.offsetHeight;
listH += 1;
if (listH <= 35) {
ulist.style.height = listH + 'px';
setTimeout("mouseDown('" + id + "')", 10);
} else {
return;
}
}
function mouseLeaves(id) {
var ulist = document.getElementById(id);
var listH = ulist.offsetHeight;
listH -= 1;
if (listH >= 0) {
ulist.style.height = listH + 'px';
setTimeout("mouseLeaves('" + id + "')", 10);
} else {
ulist.style.display = 'none';
return;
}
}
</script>
</head>
<body>

<div id="menu">
<ul id="nav">
<li class="mainlevel"><span class="note">慕课网</span></li>
<li class="mainlevel" id="mainlevel_01"><a href="#">课程大厅</a>
<ul class="sub_nav_01" id="menu_S">
<span class="Triangle_con"></span>
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_02"><a href="#">学习中心</a>
<ul class="sub_nav_01" id="menu_b">
<span class="Triangle_con"></span>
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
<li class="mainlevel"><a href="#">个人中心</a></li>
<li class="mainlevel"><a href="#">关于我们</a></li>

</ul>
</div>
</body>
</html>