dreamweaver8怎么做导航栏中的下拉菜单

部分代码如图,想让鼠标放到导航栏中的那个栏目的图片之后出来下拉菜单,该怎么做

DreamWeaver 是用标签行为的功能来制作下拉菜单的。

具体步骤:

在DreamWeaver中绘制层(注意是绘制层,不是插入div)


绘制一个 宽度130px; 高度20px; 的层 在层里插入同样大小的表格

这时DreamWeaver会自动命名ID为 Layer1

在此层下面 紧接着再绘一个宽度一样 高度为100px;的层 

DreamWeaver会自动命名ID为 Layer2

同样在层也插入相同大小的表格,插入表格是 让文字分层居中。

选中 Layer2 让它默认是隐藏 (在Layer2左边点一下 让眼睛闭着就是隐藏的意思了)

在网页中选 Layer1 点标签行为面板的+ >>显示-隐藏层 选项


弹出窗口 选中Layer2 点显示 然后确定


在行为里添加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>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2012-10-20
在设计部分选中你这段代码的连接 添加行为里面有吧
用ul在网上当一个也行,这样的例子挺多的
相似回答