<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>多級菜單?JS</title>
<style>
ul?{
list-style:?none;
}
.top-nav{
font-size:?12px;
font-weight:?700;
}
.top-nav?li?{
float:?left;
margin-right:?1px;
}
.top-nav?li?a?{
display:?block;
width:?80px;
line-height:?20px;
text-decoration:?none;
background:?#ddd;
color:?#666;
text-align:?center;
}
.top-nav?li?ul?{
display:?none;
padding:?0;
position:?relative;??
width:?80px;
}
.top-nav?li?ul?li?ul?{
position:?absolute;??
top:?0;
left:?81px;???
}
.top-nav?li?a:hover?{
background:?#900;
color:?white;????
}??
</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";
}
}
Lis[i].onmouseout=function(){
var?u=this.getElementsByTagName("ul")[0];
if?(u?!=?undefined)?{??
u.style.display="none";
}
}
}
}
</script>
</head>
<body>
<ul>
<li><a?href="#">首頁</a></li>
<li><a?href="#">課程大廳</a>
<ul>
<li><a?href="#">ios開發</a></li>
<li><a?href="#">安卓開發</a></li>
<li><a?href="#">wp開發</a></li>
</ul>
</li>
<li><a?href="#">學習中心?+</a>
<ul>
<li><a?href="#">前端課程?+</a>
<ul>
<li><a?href="#">javascript</a></li>
<li><a?href="#">css</a></li>
<li><a?href="#">jquery</a></li>
</ul>
</li>
<li><a?href="#">手機開發</a></li>
<li><a?href="#">后臺編程</a></li>
</ul>
</li>
<li><a?href="#">關于我們</a></li>
</ul>
</body>
</html>以上代碼是通過CSS的“hover”來實現菜單欄背景色、字體顏色的變化的。
用JS怎么實現菜單欄鼠標移入時背景色、字體顏色改變（在下面的代碼中修改）？
umenoki
2016-11-04 16:42:35
