请问我的js代码哪里出错了，为什么不能显示二级子菜单
<!DOCTYPE html>
<html>
<head>
<title>div菜单框架</title>
<script src='jquery-3.4.1.js'></script>
<style type="text/css">
*{margin:0;
padding: 0;}
div{
width:650px;
display: block;
margin: auto;}
ul{
list-style: none;
height: 40px;
}
ul>li{
width: 120px;
height: 40px;
line-height: 40px;
display: block;
float: left;
text-align: center;
margin-right:2px;
margin-bottom:1px;
}
.firstpage>li{
background: #aaa;
color: black;
position: relative;
}
.firstpage>li:hover{
background:#369;
color:white;
}
.secondpage{
position: absolute;
/*left:-40px;*/
display: none;
}
.secondpage>li{
background: #d60;
color: white;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="div菜单框架.css"> -->
<!-- CSS方法实现 -->
<script src='div菜单框架.js'></script>
<!-- JS方法实现 -->
<!-- <script src='div菜单框架jquery.js'></script> -->
<!-- jquery方法实现 -->
</head>
<body>
<div>
<ul class="firstpage">
<li>首页</li>
<li >课程大厅
<ul class="secondpage" >
<li>Javascript</li>
<li>HTML/CSS</li>
</ul>
</li>
<li >学习中心
<!-- onmouseover='startmove(this,true)' onmouseout='startmove(this,false)' -->
<ul class="secondpage">
<li>视频学习</li>
<li>实例练习</li>
<li>问与答</li>
</ul>
</li>
<li>经典案例</li>
<li>关于我们</li>
</ul>
</div>
</body>
</html>
window.onload = function(){
var Li1 = document.getElementsByTagName('li')
for(i=0;i<Li1.length;i++){
Li1.onmouseover = function(){
startmove(this,true)
}
Li1.onmouseout = function(){
startmove(this,false)
}
}
}
function startmove(li,TOF){
var secondpage = li.getElementsByTagName('ul')[0];
if (TOF==true) {
secondpage.style.display = "block";
}
else{
secondpage.style.display = "none";
}
}
