用Dreamweaver做真正半透明的菜单阴影

给你网页上的菜单加上阴影效果能很好的提高视觉效果，当然办法有很多，用Java和图片都能实现，但用Java你是不是觉得太复杂?用图片很简单，但如果菜单下面有内容，效果就太假了。下面我们只用dreamweaver4自身的功能，通过简单的办法就能让你网页上的菜单拥有真正半透明的阴影效果。

下图是在Dreamweaver4中用层功能做的一个非常简单的弹出菜单：

图1

左边是触发条，当鼠标放在这些条目上右边就会弹出相应的菜单。这里我们假设要加上阴影效果的菜单层为submenu1。

首先，用层工具新建一个层，大小位置一定要和submenu1层保持一致，到属性面板把层的背景色改为黑色，到层面板选中这个新建出来的层，双击层的名字，将这个层的名字改成submenu1s，z高度设为比submenu1层低一级。

图2

选中submenu1s层，用键盘上的方向键往右和下挪动7、8次，使submenu1s层和submenu1层错开。

现在开始修改触发元素和菜单层的事件，以让submenu1s层和submenu1层的显示隐藏同步。选中submenu1层，到事件面板，一般这种方法做出的菜单都有两个事件，OnMouseOut和OnMouseOver，双击OnMouseOver事件，出现隐藏-显示层面板，选 submenu1s层，点显示按钮，点确定关掉这个窗口。同样，再双击OnMouseOut事件，选submenu1s层，点隐藏按钮，点确定。

用上面的方法修改你自己菜单的触发元素的事件，这样submenu1s层和submenu1层就同时显示、隐藏。

到CSS面板新建一个样式，取名为shadow，在样式定义的窗口中到扩展栏。点滤镜下拉菜单，选中第一项“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”。

图3

修改其中的“?”：Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

其中Opocity=?用于控制半透明的程度，取值相当于百分比，你可以根据你自己的情况调整这个值。

选择submenu1s层，再到CSS单击shadow样式，对submenu1s层应用这个样式。

按F12预览看看吧。

图4