下拉菜单求助?

请教各位高手，最近要做个导航下拉菜单，由于JS很菜，下拉菜单一直没做好？<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.btnO li{ float:left; padding-left:0px; line-height:110%;}
.btnO li img{ vertical-align:top; display:block;}
.btnO li.pos{ position:relative;}
.btnO li.pos div.win{ width:380px; height:145px; display:none; background:url('winbg.png') no-repeat; +background:none; +filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='winbg.png'; ); position:absolute; left:-30px; top:52px;}
.btnO li.pos div.win p{ padding:18px 16px 0; line-height:180%;}
.btnO li.pos div.win p b{ font-size:14px;}
</style>
<script language="JavaScript" type="text/JavaScript">
function toggle(targetid){
   var  target=document.getElementById(targetid);
//alert(target.style.display);
            if (target.style.display=="block"){
                target.style.display="none";
            } else {
                target.style.display="block";
            }
}
</script>
</head>
<body>
  <ul class="btnO">
    <div>
      <li class="pos"><a href="#" onmouseover="toggle('win1');"  onmouseout="toggle('win1');">一级菜单一</a>　　　
        <div class="win" id="win1">
          <p>
            <b><A HREF="">菜单一</A></b>
          </p>
        </div>
      </li>
    </div>
  </ul>  <ul class="btnO">
    <div>
      <li class="pos"><a href="#" onmouseover="toggle('win2');"  onmouseout="toggle('win2');">一级菜单二</a>
        <div class="win" id="win2">
          <p>
            <b><A HREF="">菜单三</A></b>
          </p>
        </div>
      </li>
    </div>
  </ul></body>
</html>
我想实现的效果是，当鼠标移到“一级菜单一”显示“菜单一”的层，鼠标可以点击“菜单一”的链接，当鼠标移到“一级菜单二”，显示“菜单三”的层，鼠标可以点击“菜单三”的链接，当鼠标移走的时候，下拉菜单就消失，请问各位高手我改怎么修改啊？谢谢！分不多，希望不吝赐教！谢谢！

解决方案 »

  1.   

    红色的为修改的
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    .btnO li{ float:left; padding-left:0px; line-height:110%;}
    .btnO li img{ vertical-align:top; display:block;}
    .btnO li.pos{ position:relative;}
    .btnO li.pos div.win{ width:380px; height:145px; display:none; background:url('winbg.png') no-repeat; +background:none; +filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='winbg.png'; ); position:absolute; left:-30px; top:15px;}
    .btnO li.pos div.win p{ padding:18px 16px 0; line-height:180%;}
    .btnO li.pos div.win p b{ font-size:14px;}
    </style>
    <script language="JavaScript" type="text/JavaScript">
    function toggle(targetid){
       var  target=document.getElementById(targetid);
    //alert(target.style.display);
                if (target.style.display=="block"){
                    target.style.display="none";
                } else {
                    target.style.display="block";
                }
    }
    </script>
    </head>
    <body>
      <ul class="btnO">
        <div>
          <li class="pos"><a href="#" onmouseover="toggle('win1');"  onmouseout="toggle('win1');">一级菜单一</a>　　　
            <div class="win" id="win1" onmouseover="toggle('win1');"  onmouseout="toggle('win1');">
              <p>
                <b><A HREF="">菜单一</A></b>
              </p>
            </div>
          </li>
        </div>
      </ul>  <ul class="btnO">
        <div>
          <li class="pos"><a href="#" onmouseover="toggle('win2');"  onmouseout="toggle('win2');">一级菜单二</a>
            <div class="win" id="win2" onmouseover="toggle('win2');"  onmouseout="toggle('win2');">
              <p>
                <b><A HREF="">菜单三</A></b>
              </p>
            </div>
          </li>
        </div>
      </ul></body>
    </html>