javascript 二级导航问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级导航</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6{padding:0;margin:0}
a{text-decoration:none;}
.clear{clear:both}
#myDiv{height:35px;background:#ccc;width:1000px;margin:0 auto;line-height:35px;}
#myDiv .clsDiv{background:#414141;height:35px;position:relative;float:left;margin:0 10px;}
#myDiv .clsDiv a{color:#fff;display:block;height:35px;padding:0 20px;}
#myDiv .clsDiv a:hover{background:red;}
#myDiv .clsDiv .menu{pisition:relative;display:none;}
#myDiv .clsDiv .menu a{height:auto;background:#ccc;}
</style>
</head>
<body>
<div id="myDiv">
<div id="clsDiv" class="clsDiv"><a href="javascript:;">在线预订</a>
<div class="menu" >
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
</div>
</div>
<div id="clsDiv" class="clsDiv"><a href="javascript:;">酒店介绍</a>
<div class="menu" >
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
<a href="#">联系我们</a>
</div>
</div>
<div id="clsDiv" class="clsDiv"><a href="javascript:;">温馨客房</a></div>
<div id="clsDiv" class="clsDiv"><a href="javascript:;">餐饮美食</a></div>
<div id="clsDiv" class="clsDiv"><a href="javascript:;">联系我们</a></div>
<div class="clear"></div>
</div>
</body>
</html>
<script type="text/javascript">
var clsDiv = document.getElementsByClassName("clsDiv");
for (var i = 0; i < clsDiv.length ; i++ ){
document.getElementsByClassName("clsDiv").item(i).onmouseover = function(){
document.getElementsByClassName("menu").item(i).style.display = "block";
}
document.getElementsByClassName("clsDiv").item(i).onmouseout = function(){
document.getElementsByClassName("menu").item(i).style.display = "none";
}
}
</script>
事件中如何获取变量i对应的值，现在问题i只能取到最终值，求高手指教。。。
