用Dreamweaver制作下拉菜单的原理：它利用了Behaviors（行为）面板中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在“层”中。
一、 导航条的制作
按CTRL+F2打开Objects面板，点击【层按钮】在页面中按住鼠标不放拖出一个“层”，然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、30，背景填入#006699，如图。


将光标移至‘层内’，点击Objects面板上的【表格按钮】，插入一个一行四列的“表格”。
按住CTRL键不放，公别点取表格的四个单元格，然后设置它们的宽度为120（120*4=480），高度为25，并在前两个单元格中输入“关于公司”和“新闻中心”，做为主菜单名，并加上链接。
二、 下拉选单的制作

　  现在开始制作将要‘下拉出现的菜单’，同样用‘层’来制作。
再次插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景填入#999966，其中L和T两个参数是设置这个层距离窗口‘左边框’和‘上边框’的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
  这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单（W=120,H=80）。这个层将作为“关于公司”的下拉选单出现，填入你所需要的菜单并链接。同样的方法，制作其它的下拉选单（层menu2）。

  这一步要注意的地方就是下拉菜单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线。如果远离导航条的话，鼠标一离
开导航条，菜单就消失了。
    按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。
三、 显示和隐藏效果的添加
本步骤分为两部分：
第一，对“导航条中的主菜单”添加控制显示隐藏的命令；
第二，给“下拉选单”本身添加显示隐藏的命令。
  1．导航条部分
    首先按CTRL键不放，点击导航条中的第一个单元格，现按Shift+F3打开Behaviors(行为)窗口，在下拉选项中选中"Show-Hide Layers"（如图）。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点按钮，此时"Show-Hide Layers"将出现。



  这时将会弹出一个窗口，如下图。在Named Layers(命名的层)框中会列出当前网页所有的层，选中“层 "menu1" ”，因为我们想要menu1这个层对“关于公司”响应。然后点下面的“显示(Show)”按钮→OK。

  这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1html怎么做下拉式多级导航栏的状态变为显示（Show）。
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点按钮，在下拉选项中选中"Show-Hide Layers"，在弹出窗口中选中“ 层 "menu1" ”，因为我们想要menu1这个层对“新闻中心”响应。然后点下面的“隐藏(hide)”按钮，OK。

回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。

2．下拉选单部分
先选中层menu1，方法是点击‘层的边缘’或在LAYER面板中点击menu1，用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。
3．重复以上两部分，为导航条的第二个主菜单“新闻中心”和层menu2添加显示、隐藏层命令。
　【若鼠标停留“导航标题栏”(关于公司)，看到“下拉选单”不整齐，则可把第一行的“公司简介”改成“空白”】
四、 下拉菜单的美化修饰

  到这里，下拉菜单的功能效果已经实现了，你现在按F12就可以看到。不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。

1．定义菜单字体样式
按Shift+F11打开CSS Style（样式）面板，点击面板下面的按钮
在弹出的"New Style"窗的Type选Redefine HTML Tag，Tag框内选中td标签，Define选This Document Only，如图。
此时弹出设置窗口，不管其它的，只在右边的Size框里选中12，单位为pixels。

2．定义菜单链接样式
在样式面板中，点击面板下面的 按钮，在弹出窗中， Type选Use CSS Selector，Tag框内选中a:hover标签，Define选This Document Only.
  点击‘确定’后在弹出窗中，Color填#ff9933，Decoration选none，点OK。
返回到样式面板，点击面板下面的按钮，在弹出窗中， Type选Use CSS Selector，Tag框内选中a:link标签，Define选This Document Only。
点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。


又返回到样式面板，点击面板下面的按钮， Type选Use CSS Selector，Tag框内选中a:visited标签， Define选This Document Only。
点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。
3．定义菜单边框样式
在样式面板中，点击面板下面的 按钮，在弹出窗中， Tag框内选中tabld标签，Type选Redefine HTML Tag，Define选This Document Only.
弹出设置窗口，在左边的列表中选Border，右边四条边宽度都输入为1，颜设为黑#000000，Style选为solid。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。