求JS高手帮忙编写JS实现二级菜单的隐藏与出现

CSS样式：
/*导航栏*/
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
.nav_son { height:30px;}
.nav_son ul li { float:left; margin-top:4px;}
.nav_son ul li a { display:none; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
.nav_son ul li.current a{display:block}
.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}HTML：
 <div id="nav">
   <div id="nav_l"></div>
    <div id="nav_r"></div>
    <div class="nav_main">
      <ul>
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#" id="nav_current"><span>贵金属投资</span></a></li>
        <li><a href="#" ><span>交易指南</span></a></li>
        <li><a href="#"><span>评论</span></a></li>
        <li><a href="#"><span>星际服务</span></a></li>
        <li><a href="#"><span>软件下载</span></a></li>
        <li><a href="#"><span>财经日历</span></a></li>
        <li><a href="#"><span>在线咨询</span></a></li>
      </ul>
    </div>
    <div class="nav_son">
     <ul>
        <li><a href="#">投资特点</a></li>
        <li><a href="#">盈亏计算</a></li>
        <li><a href="#">投资者权益保障</a></li>
      </ul>求高手编个JS程序帮我实现鼠标移上去就显示二级菜单，移除就隐藏二级菜单的功能。

解决方案 »

  1.   


    <html>
     <head>
      <style type="text/css">
    .list_menu{
       display:inline;
       float:left;
       margin-left:100px;
    }
    .list_child{
       display:none;
    }
    .list_menu:hover .list_child{
       display:block;
    }
      </style>
     </head>
     <body>
         <ul>
    <li class="list_menu">上级列表
    <ul class="list_child">
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    </ul>
    </li>
    <li class="list_menu">上级列表
    <ul class="list_child">
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    <li>212121</li>
    </ul>
    </li>
        </ul>
      </body>
    </html>