下拉菜单求助?

oyf1976 2009-12-25 09:49:24

请教各位高手，最近要做个导航下拉菜单，由于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>

我想实现的效果是，当鼠标移到“一级菜单一”显示“菜单一”的层，鼠标可以点击“菜单一”的链接，当鼠标移到“一级菜单二”，显示“菜单三”的层，鼠标可以点击“菜单三”的链接，当鼠标移走的时候，下拉菜单就消失，请问各位高手我改怎么修改啊？谢谢！分不多，希望不吝赐教！谢谢！

...全文

71 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

oyf1976 2009-12-27

打赏
举报

谢谢！已解决！

浪尖赏花 2009-12-25

打赏
举报

红色的为修改的
<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>

仿效outlook制作的工具栏，。net源代码的

Excel表格的基本知识与基本操作PPT课件.ppt

第3章、办公自动化系统：Windows XP.pptx

Win8设置任务栏图标合并或者隐藏效果.docx

有些电脑问题并不是你想的那么难解决，自己动手，就可以解决！