8.7w+
社区成员
下拉菜单求助?
请教各位高手，最近要做个导航下拉菜单，由于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>
我想实现的效果是，当鼠标移到“一级菜单一”显示“菜单一”的层，鼠标可以点击“菜单一”的链接，当鼠标移到“一级菜单二”，显示“菜单三”的层，鼠标可以点击“菜单三”的链接，当鼠标移走的时候，下拉菜单就消失，请问各位高手我改怎么修改啊？谢谢！分不多，希望不吝赐教！谢谢！
...全文
当前发帖距今超过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>
<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>