许多应用软件的主菜单都具有这样的效果，通常是暗色的，一旦鼠标移到菜单上，立即变明亮；鼠标不在菜单上时是平面的，一旦鼠标移到菜单上，菜单条立即变为立体，从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果？那么请看下面这个菜单效果。
上面这种菜单效果的制作思路是这样的：利用CSS属性可以动态改变的特点，我们先定义两组CSS，一组是鼠标不在菜单上的CSS，另一组是鼠标在菜单上用的CSS。再在onmouseover和onmouseout事件中分别调用不同的CSS就能实现本例的效果了。下面讲具体的制作方法：
1、先作一个1*4的表格，在表格中填入菜单名称并设置好链接；
2、为了使菜单产生立体效果，实际上只要把菜单的上边框线和左边框设置为白色，右边框线和下边框线设置为黑色，就能产生立体效果了。在Dreamweaver3中按F7（或点击快速启动栏里那个象“八卦图”似的图标），调出CSS面板，选择“none”，再点击面板下部的编辑图标，在弹出的“Edit Style Sheet”对话框上按“New”按钮，在弹出的“New Style”对话框中选择“Make Custom Style (，这行代码的作用与上面类似，只是这里改变的是透明度，从视觉上产生一种明暗程度相互转换的效果。
到此，制作全部结束，按F12看看效果吧！用Dreamweaver3自动生成的CSS代码稍多一点，若对CSS熟悉的话，可直接编写，不是用Dreamweaver的网友，也可以把代码直接加在相应的位置即可。本例旨在抛砖引玉，提出一种方法思路，关键在于灵活应用，就可做出许多特殊效果来，如把菜单项由文本换成图象，效果将大不一样；把边框线的颜色改一下，就可获得象Dreamweaver主菜单那样，当鼠标在菜单项上时，产生凹下去的效果。
鼠标不在菜单上
鼠标在菜单上
上面这种菜单效果的制作思路是这样的：利用CSS属性可以动态改变的特点，我们先定义两组CSS，一组是鼠标不在菜单上的CSS，另一组是鼠标在菜单上用的CSS。再在onmouseover和onmouseout事件中分别调用不同的CSS就能实现本例的效果了。下面讲具体的制作方法：
1、先作一个1*4的表格，在表格中填入菜单名称并设置好链接；
2、为了使菜单产生立体效果，实际上只要把菜单的上边框线和左边框设置为白色，右边框线和下边框线设置为黑色，就能产生立体效果了。在Dreamweaver3中按F7（或点击快速启动栏里那个象“八卦图”似的图标），调出CSS面板，选择“none”，再点击面板下部的编辑图标，在弹出的“Edit Style Sheet”对话框上按“New”按钮，在弹出的“New Style”对话框中选择“Make Custom Style (，这行代码的作用与上面类似，只是这里改变的是透明度，从视觉上产生一种明暗程度相互转换的效果。
到此，制作全部结束，按F12看看效果吧！用Dreamweaver3自动生成的CSS代码稍多一点，若对CSS熟悉的话，可直接编写，不是用Dreamweaver的网友，也可以把代码直接加在相应的位置即可。本例旨在抛砖引玉，提出一种方法思路，关键在于灵活应用，就可做出许多特殊效果来，如把菜单项由文本换成图象，效果将大不一样；把边框线的颜色改一下，就可获得象Dreamweaver主菜单那样，当鼠标在菜单项上时，产生凹下去的效果。
