用js+css实现一个三级下拉菜单

1===========
      2===========
            3===========
1===========
1===========
      2===========
就如这种形式的下拉菜单，有的请提供一个，谢谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

菜单样式通过css设定，然后js显示隐藏就是了
自己手写的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>MENU</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript">

   var datas = [];
   datas[0]={"id":1,"pid":-1,"name":'A'};
datas[1]={"id":2,"pid":-1,"name":'B'};
datas[2]={"id":3,"pid":1,"name":'C'};
datas[3]={"id":4,"pid":1,"name":'D'};
datas[4]={"id":5,"pid":4,"name":'E'};
datas[5]={"id":6,"pid":2,"name":'f'};
datas[6]={"id":7,"pid":3,"name":'g'};
datas[7]={"id":8,"pid":2,"name":'h'};

function _add(_id){
if($("ul[name='"+_id+"']").length>0){
$("ul[name='"+_id+"']").show();
return;
}
var htmlStr = "";
for(var i=0;i<datas.length;i++){
if(datas[i]["pid"]==_id){
htmlStr +="<li id='"+datas[i]["id"]+"' onmouseover='_add("+datas[i]["id"]+")' onmouseout='_hide("+datas[i]["id"]+")' >";
htmlStr +=datas[i]["name"];
htmlStr +="</li>";
}
}
var cont=$("<ul name='"+_id+"' >"+htmlStr+"</ul>");
$("#"+_id).append(cont);
}
function _hide(_id){
$("ul[name='"+_id+"']").hide();
}
  </script>
</head> <body>
   <div id="mu" >
   </div>
<script type="text/javascript">

</script>
</body>
</html>