求一个方法思路

sun0903 2009-07-03 09:12:46

写了一个下拉菜单，怎么让鼠标移开后，字菜单也消失。原本想用纯css，但ie6下不支持。之前代码写的凌乱。但我己经将li定义了id，由于我刚开始学javascript,请大家多指教，代码如下！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">
.menu {
font-size:12px;
margin:0px;
padding:0px;
background-color:#f9f8f4;
}

.menu ul {
padding-right:1px;
margin:0;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li.one a, .menu ul li.one a:visited { display:block; text-align:center; text-decoration:none; width:110px; height:34px; color:#666;
padding:0px 1px 0px 0px;background-color:#000000; line-height:30px; font-size:14px;
background:transparent url(images/m-1.jpg) no-repeat left;
background-color:#f9f8f4; height:24px;
}

.menu ul li.two a, .menu ul li.two a:visited { display:block; text-align:center; text-decoration:none; width:110px; height:34px; color:#666;
padding:0px 1px 0px 0px;background-color:#000000; line-height:30px; font-size:14px;
background:transparent url(images/m-2.jpg) no-repeat left; height:24px;
}

.menu ul li.three a, .menu ul li.three a:visited { display:block; text-align:center; text-decoration:none; width:110px; height:34px; color:#666;
padding:0px 1px 0px 0px;background-color:#000000; line-height:30px; font-size:14px;
background:transparent url(images/m-3.jpg) no-repeat left; height:24px;
}

.menu ul li.four a, .menu ul li.four a:visited { display:block; text-align:center; text-decoration:none; width:110px; height:34px; color:#666;
padding:0px 1px 0px 0px;background-color:#000000; line-height:30px; font-size:14px;
background:transparent url(images/m-4.jpg) no-repeat left ;height:24px;
}

.menu ul li.one a:hover{ color:#fff; background:url(images/m-1-2.jpg) no-repeat left; background-color:#CB281F; height:24px;}

.menu ul li.two a:hover{ color:#fff; background:url(images/m-2-2.jpg) no-repeat left; background-color:#CB281F; height:24px;}

.menu ul li.three a:hover{ color:#fff; background:url(images/m-3-2.jpg) no-repeat left; background-color:#CB281F; height:24px;}

.menu ul li.four a:hover{ color:#fff; background:url(images/m-4-2.jpg) no-repeat left; background-color:#CB281F; height:24px;}

/*显示与关闭*/

.menu ul li.one ul.collapsed{display: none;}

.menu ul li.one ul.expanded{ position:absolute; padding:0px; margin:0px; /*firefox*/clear:both; display:block; width:60px; }

.menu ul li.two ul.collapsed{display: none;}

.menu ul li.two ul.expanded{position:absolute; padding:0px; margin:0px; /*firefox*/clear:both;display:block; width:160px;}

.menu ul li.three ul.collapsed{display: none;}

.menu ul li.three ul.expanded{position:absolute; padding:0px; margin:0px; /*firefox*/clear:both; display:block; width:60px;}

.menu ul li.four ul.collapsed{display: none;}

.menu ul li.four ul.expanded{position:absolute; padding:0px; margin:0px; /*firefox*/clear:both; display:block; width:60px;}

#span1 a{ color:#000; background:url(images/s-2.jpg) no-repeat left; background-color:#EBE8D7;}

#span2 a{ color:#000; background:url(images/s-1.jpg) no-repeat left; background-color:#EBE8D7;}

#span1 a:hover{ color:#fff; background:url(images/s-2-2.jpg) no-repeat left; background-color:#CB281F;}

#span2 a:hover{ color:#fff; background:url(images/s-1-2.jpg) no-repeat left; background-color:#CB281F;}

</style>
<script language="javascript">
function OnMenu(i){
for(var j=1;j<5;j++){
var obj=document.getElementById("downMenu"+j);
if(i==j){
if(obj.className=="expanded")
obj.className="collapsed";
else
obj.className="expanded";
}
else{
obj.className="collapsed";
}
}
}
</script>
</head>

<body>

<div class="menu">

<ul>

<li class="one" ><a href="#Menu=downMenu1" onMouseOver="OnMenu(1)">购物车</a>
<ul id="downMenu1" class="collapsed">

</ul>
</li>

<li class="two"><a href="#Menu=downMenu2" onMouseOver="OnMenu(2)">会员专区</a>
<ul id="downMenu2" class="collapsed">
<li id="span1" class="collapsed"><a href="#">资料修改</a></li>
<li id="span2" class="collapsed"><a href="#">订单查询</a></li>
</ul>

</li>

<li class="three"><a href="#Menu=downMenu3" onMouseOver="OnMenu(3)">订购说明</a>
<ul id="downMenu3" class="collapsed">

</ul>
</li>

<li class="four"><a href="#Menu=downMenu4" onMouseOver="OnMenu(4)">联络中心</a>
<ul id="downMenu4" class="collapsed">

</ul>
</li>

</ul>

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

...全文