DreamWeaver 是用标签行为的功能来制作下拉菜单的。
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/d1160924ab18972be872ab96e0cd7b899e510a25?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
具体步骤:
在DreamWeaver中绘制层(注意是绘制层,不是插入div)
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/b21c8701a18b87d6491d3f43010828381f30fd0b?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
绘制一个 宽度130px; 高度20px; 的层 在层里插入同样大小的表格
这时DreamWeaver会自动命名ID为 Layer1
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/4e4a20a4462309f7039e3b4e740e0cf3d6cad6fd?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
在此层下面 紧接着再绘一个宽度一样 高度为100px;的层
DreamWeaver会自动命名ID为 Layer2
同样在层也插入相同大小的表格,插入表格是 让文字分层居中。
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/c995d143ad4bd11331f4276e5cafa40f4bfb05b4?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
选中 Layer2 让它默认是隐藏 (在Layer2左边点一下 让眼睛闭着就是隐藏的意思了)
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/a8ec8a13632762d077a737e3a6ec08fa503dc6d5?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
在网页中选 Layer1 点标签行为面板的+ >>显示-隐藏层 选项
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/10dfa9ec8a1363271cac506f978fa0ec08fac72d?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
弹出窗口 选中Layer2 点显示 然后确定
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/0dd7912397dda14413e6f1eeb4b7d0a20df486fb?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
在行为里添加onMouseOver(意思是鼠标经过时)
同样的方法 让 Layer2 隐藏
在行为里添加onMouseOut(意思是鼠标离开时)
这样就成功,可是会发现离开总菜单 下拉菜单也消失了,所以
最后还要选中 Layer2 再做一次 Layer2的onMouseOver onMouseOut 行为。
制作出的全部代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:78px;
top:34px;
width:130px;
height:20px;
z-index:1;
}
#Layer2 {
position:absolute;
left:78px;
top:62px;
width:130px;
height:100px;
z-index:2;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="2" cellspacing="1">
<tr>
<td align="center">总菜单</td>
</tr>
</table>
</div>
<div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
<table width="130" border="1" cellpadding="5" cellspacing="1">
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
<tr>
<td align="center">菜单</td>
</tr>
</table>
</div>
</body>
</html>