zEUS.’Blog|網生@誌

之前使用 CSS 制作过悬浮菜单，但它只能显示在 Firefox 和 Safari 上，而不能显示在不完全支持 CSS2.0 的 IE6 上，为此我花了很长时间搜寻解决之道，期间被那该死的 IE 折磨得我抓狂无数次，可仍然无果… 最后我不得不放弃使用 CSS 而转投 JavaScript…

这里我将介绍的是使用 DreamWeaver 直接进行可视化操作来创建一个悬浮菜单，整个主线过程无须操作代码，实现起来非常简单，当然，最重要的是它适用于所有主流的浏览器！

具体效果可以参见本站日志栏下的“文章分类”和“日志归档”这2个栏目。

运行 DW 后新建一个 HTML 文档，我们先单击“布局”栏的“绘制 AP Div”按钮（上图红圈处）来绘制2个 DIV 容器，默认命名为：apDiv1 和 apDiv2，然后给它们添加一些内容和样式，并稍微修改代码让 apDiv1 包含 apDiv2。

接下来我们想要的效果是：默认不显示 apDiv2 菜单，当鼠标移动到 apDiv1 层上，则显示 apDiv2 菜单，移开则让 apDiv2 菜单隐藏。

开始添加 JavaScript 效果：点击工具栏的“窗口”

并在下拉菜单中选择“行为”，即可在右侧栏看到“行为”的设置窗口

在可视化的界面下选择 apDiv1 层，然后给其添加行为：“显示-隐藏元素”

（图-1）

修改这个行为的条件为“onMouseOver”

（图-2）

你可能已经看懂了，以上步骤就是实现鼠标移动到 apDiv1 层上（onMouseOver），然后就显示 apDiv2 菜单，接下来创建一个相反的行为：鼠标从apDiv1 层上移开则隐藏 apDiv2 菜单，过程与上面大致相同，不同的是当创建到（图-1）步骤时选择隐藏 div “apDiv2″ ，进行到（图-2）步骤时条件选择为：onMouseOut。

最后我们还需要将 apDiv2 菜单的初始状态设为隐藏才能真正达到效果。将下面这段代码加入到 apDiv2 的样式中即可：

保存预览即可看到效果，不过 Firefox 和 IE6 下的效果会有些不一样，可以根据需要针对性的在 CSS 里进行不同的定义。

zEUS.