請問我的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";
? ? }
}
2020-04-03
已經解決，是忘記給Li1做編號了！