求一个方法思路

  写了一个下拉菜单，怎么让鼠标移开后，字菜单也消失。原本想用纯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>

解决方案 »

  1.   

    <style>
    body{ /*定义body字体大小、字体居中，页面边缘、字体缩近*/
    　　font-size:12px;
    　　font-family:Arial, Helvetica, sans-serif;
    　　margin:0px;
    　　padding:0px;
    　　text-align:center;
    }
    ul,li{
    　　margin:0px;padding:0px;
    }
    li{
    　　display:inline;
    　　list-style:none;
    　　list-style-position:outside;
    　　text-align:center;
    　　font-weight:bold;
    　　float:left;
    }
    a:link, a:visited{ /*link:连接平常的状态、visited:连接被访问过之后 */
    　　color:#336601;
    　　text-decoration:none;
    　　float:left;
    　　width:100px;
    　　padding:3px 5px 0px 5px;
    }
    a:hover{ /* hover:鼠标放到连接上的时候*/
    　　color:white;
    　　float:left;
    　　padding:3px 3px 0px 20px;
    　　width:88px;
    　　text-decoration:none;
    　　background-color:#539D26;
    }
    a:active{ /*active:连接被按下的时候*/
    　　color:white;
    　　float:left;
    　　padding:3px 3px 0px 20px;
    　　width:88px;
    　　text-decoration:none;
    　　background-color:#BD06B4;
    }
    #nav{ /*设置整个下拉式菜单*/
    　　width:600px;
    　　height:30px;
    　　border-bottom:0px;
    　　padding:0px 5px;
    　　position:absolute;
    　　z-index:1;
    　　margin-left:100px;
    　　margin-top:20px;
    }
    .list{
    　　line-height:20px;
    　　text-align:left;
    　　padding:4px;
    }
    .menu1{ /*设置menu1:宽、高、边缘、边框、背景色、字体颜色、字体左缩近、溢出y坐标（隐藏）*/
    　　width:120px;
    　　height:auto;
    　　margin:6px 4px 0px 0px;
    　　border:1px solid #9CDD75;
    　　background-color:#F1FBEC;
    　　color:#336601;
    　　padding-left:6px;
    　　cursor:hand;
    　　overflow-y:hidden;
    }
    .menu2{ /*设置menu2:宽、高、边缘、边框、背景色、字体颜色、字体左缩近、溢出y坐标（隐藏）*/
    　　width:120px;
    　　height:18px;
    　　margin:6px 4px 0px 0px;
    　　background-color:#F5F5F5;
    　　color:#999999;
    　　border:1px solid #EEE8DD;
    　　padding-left:6px;
    　　overflow-y:hidden;
    　　cursor:hand;
    } 
    </style>
    <div id="nav">
    　　<ul>
    　　　　<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 
    　　　　　　<div class="list">
    　　　　　　　　<a href="#">我的首页</a><br />
    　　　　　　　　<a href="#">我的日志</a><br />
    　　　　　　　　<a href="#">我的相册</a><br />
    　　　　　　　　<a href="#">我的收藏</a><br />
    　　　　　　</div>
    　　　　</li>
    　　</ul>
    </div> 建议你加入我一个群，这个群里javascript高手很多，而且每个人都爱帮忙人。67079222
      

  2.   

    "写了一个下拉菜单，怎么让鼠标移开后，字菜单也消失。原本想用纯css，但ie6下不支持。"可以啊，你看看这个：http://topic.csdn.net/u/20090604/10/d6248fe2-6957-46e0-88df-605bcf78bc65.html