怎么用Js把这个导航的下拉菜单实现啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=bg2312" />
<title>JavaScript 下拉菜单</title>
<style type="text/css"> *{margin:0;padding:0;}
a{text-decoration:none;color:#fff;}
a:hover{text-decoration:underline;color:#c00;}
ul{width:600px;border:1px solid orange;list-style:none outside none;margin:0 auto;overflow:hidden;height:150px;font-size:14px;font-family:"微软雅黑"}
dl{width:145px;float:left;background:#7AB2FF;}
ul li{border-bottom:5px solid #2F87FE;floaT:left;width:145px;margin-left:1px;}
ul li dl dt{background:#4E7CFF;width:145px;}
ul li dl dt a{display:block;background:orange;padding:10px;height:1.5em;overflow:hidden;}
ul dl dd{display:none;}
ul dl dd a{display:block;background:#83A0FF;height:25px;}
ul dl dd a:hover{background:#C9D6FF;color:#000;font-weight:bold;}
</style></head>
<body> <h1>Snapshots</h1>
<ul id="nav">
<li>
<dl id="internalnav">
<dt><a href="">设计类</a></dt>
<dd><a href="">Dreamweaver</a></dd>
<dd><a href="">flash</a></dd>
<dd><a href="">photoshop</a></dd>
</dl>
</li>
<li>
<dl id="internalnav">
<dt><a href="">开发类</a></dt>
<dd><a href="">Dreamweaver</a></dd>
<dd><a href="">flash</a></dd>
<dd><a href="">photoshop</a></dd>
</dl>
</li>
<li>
<dl id="internalnav">
<dt><a href="">交互类</a></dt>
<dd><a href="">Dreamweaver</a></dd>
<dd><a href="">flash</a></dd>
<dd><a href="">photoshop</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="">数据类</a></dt>
<dd><a href="">Dreamweaver</a></dd>
<dd><a href="">flash</a></dd>
<dd><a href="">photoshop</a></dd>
</dl>
</li>

</ul>
<script type="text/javascript"> </script></body>
</html> 

解决方案 »

  1.   

    你得有菜单的数据，然后js作循环或者递归构造html字串列表，填写到某个html标签中
      

  2.   

    貌似有点晚，还是发下
    <dl onmouseover="showBar(event,true)" onmouseout="showBar(event,false)"><script type="text/javascript">
    function showBar(event,bol){
    event=event||window.event;
    ot=event.srcElement?event.srcElement:event.target;
    var m=ot.parentNode.parentNode.getElementsByTagName('dd');
    var len=m.length;
    for(var i=0; i<len;i++){
    if(bol){
    m[i].style.display='block';
    }
    else{
    m[i].style.display='none';
    }
    }
    }
    </script>