下拉菜单求助?

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>


我想实现的效果是,当鼠标移到“一级菜单一”显示“菜单一”的层,鼠标可以点击“菜单一”的链接,当鼠标移到“一级菜单二”,显示“菜单三”的层,鼠标可以点击“菜单三”的链接,当鼠标移走的时候,下拉菜单就消失,请问各位高手我改怎么修改啊?谢谢!分不多,希望不吝赐教!谢谢!
...全文
58 2 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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>
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-25 09:49
社区公告
暂无公告